Loading page waiting for loading case (with source code)

【Foreword】

Today, I will introduce the principle and method of loading to achieve the effect. I remember that it was used in the project of Kaoyan.com before, here is another case to summarize

The case effect here is a gradually hidden effect, which looks more natural.

【main body】

There are two ways of js to control

(1) All elements of the page DOM nodes and all other files are loaded

window.onload = function(){...}

(2) jQuery method

$(document).ready(function(){...})

【the difference】

In Jquery, we can see two ways of writing: $(function(){}) and $(document).ready(function(){})

The effect of these two methods is the same, both execute a function after the dom document tree is loaded (note that the document tree is loaded here does not mean that all files are loaded).

And window.onload is to execute a function after the dom document tree is loaded and all files are loaded. That is to say, $(document).ready is executed before window.onload.

【suggestion】

Here I recommend using the jquery method, as long as the document tree is loaded. Otherwise, it will affect the user experience

【Case】

/*loading*/
        .loader {
            position: fixed;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.9);
            text-align: center;
            /* The loader page disappears by fading */
            -webkit-transition: opacity 1s ease;
            -moz-transition: opacity 1s ease;
            -o-transition: opacity 1s ease;
            transition: opacity 1s ease;
        }

        /* Embed the loaded logo using base64 encoding */
        .loader-content {
            background:none;
            display: block;
            position: relative;
            padding-top: 50px;
            top: 45%;

        }

        .fadeout {
            opacity: 0;
            filter: alpha(opacity=0);
        }

        /* Logo appears animated */
        @-webkit-keyframes fadeInDown {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
                transform: translate3d(0, -100%, 0)
            }
            100% {
                opacity: 1;
                -webkit-transform: none;
                transform: none
            }
        }

        @keyframes fadeInDown {
            0% {
                opacity: 0;
                -webkit-transform: translate3d(0, -100%, 0);
            }
        }
/*load end*/
<!--loading page-->
<div class="loader">
    <div class="loader-content">
        <img src="../static/imgs/loading.gif" alt="Loader" class="loader-loader"/>
    </div>
</div>
$(function(){
            setTimeout(function(){
                var loader = document.getElementsByClassName("loader")[0];
                loader.className="loader fadeout" ;//Use the fadeout method to fade out the loading page
                setTimeout(function(){loader.style.display="none"},500)
            },500)//Force display loading page 1s
        })

Loading page waiting for loading case (with source code)

Guess you like