js implements the waiting effect of page loading

Principle: The page first displays the loaded loading image, and then you get whether the pages you want to load are all loaded, and then use onload to hide the loading image.

There are two methods:

①Using the time difference between $("document").ready() in jq and the window.onload event in js, the window.onload event
is only triggered after all the pictures are loaded, and the ready event is triggered after all the DOMs are loaded. At that time, the picture has not been fully loaded, so there is a time difference

②Use js to control the display time of loading animation

Because there are no specific requirements here, I used the second simpler method.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Precache</title>
    <style type="text/css">

    </style>
</head>
<body>
<div style="height: 1000px;width: 100%;background-color: #43CD80"></div>
<script>
    //Get the visible height and width of the browser page
    var _PageHeight = document.documentElement.clientHeight,
        _PageWidth = document.documentElement.clientWidth;
    //Calculate the distance from the top and left of the loading box (the width of the loading box is 215px and the height is 61px)
    var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
        _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
    //The loading Html custom content displayed before the page is loaded
    var _LoadingHtml =
        '<div id="loadingDiv" ' +
        'style="position:absolute;left:0;width:100%;top:0;background:#f3f8ff;opacity:1;filter:alpha(opacity=80);z-index:10000;' +
        'height:' + _PageHeight + 'px;">' +
            '<div class="loadImg" ' +
            'style="position: absolute; cursor1: wait; width: auto; height: 57px; line-height: 57px;padding-left: 50px;'+
            'left: ' + _LoadingLeft + 'px;' + 'top:' + _LoadingTop + 'px; padding-right: 5px; ' +
            'border: none; color: #696969; ' +
            'background: #fff url(../../img/loadingImg.gif) no-repeat scroll 5px 10px;">' +
            'Page loading, please wait...' +
            '</div>' +
        '</div>';
    //css style

    // present loading effect
    document.write(_LoadingHtml);
    //Listen for loading state changes
    document.onreadystatechange = completeLoading;
    //Remove the loading effect when the loading state is complete
    function completeLoading() {
        setTimeout(function () {
            if (document.readyState == "complete") {
                var loadingMask = document.getElementById('loadingDiv');
                loadingMask.parentNode.removeChild(loadingMask);
            }
        },1000);

    }
</script>
</body>
</html>

I use setTimeout to control the animation display time to 1 second. Generally, the top DOM will be loaded, so it will not affect the style layout display.

It also avoids problems such as long waiting time for customers and improves the experience.

Additional: Web page loading GIF dynamic image
URL: http://www.lanrentuku.com/gif/a/loading.html

js implements the waiting effect of page loading

Guess you like