The effect of jquery gradually disappearing during page loading is realized

In order to obtain a better user experience, most web pages now add a loading effect to the page, and here a gradual disappearing effect during loading is implemented, so that it does not look so stiff.

<div id="loading"><img src="images/common/loading.gif" alt=""></div>

 

/*Loading*/
#loading{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color:#333;
    z-index: 2000;
    opacity: 1;
}
#loading img{
    width:400px;
    height:300px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-150px;
    margin-left:-200px;
    z-index: 2001;
}

 The loading here is a gif dynamic image. Compared with CSS, it is simpler and easier to use and more diverse. However, the gif image is easy to be too large, which leads to the slow loading of the image. Therefore, you need to find some places to compress images online and compress them. Reduce volume with as little distortion as possible

 

<script>
        //loading loading
        //Listen for loading state changes
        document.onreadystatechange = completeLoading;
        //Remove the loading effect when the loading state is complete
        function completeLoading() {
            if (document.readyState == "complete") {
                $("#loading").animate({
                    "opacity":"0"
                },500).hide(1000);
            }
        }
</script>

 

The default opacity is set to 1 for the loading effect, and the opacity is set to 0 for the gradually disappearing effect, but the element does not disappear in the page, which will affect the click and use of other elements on the page, so the element should be hidden.