loading页面等待加载案例（附源码）

【前言】

今天介绍个loading实现效果的原理和方法吧。记得之前考研网的项目里用过，这里再总结个案例

这里做的案例效果是渐隐藏的效果，看上去更加自然。

【主体】

有两种方式的js来控制

（1）页面所有元素DOM节点和其他所有文件都加载完毕

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

（2）jQuery方法

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

【区别】

在Jquery里面，我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})

扫描二维码关注公众号，回复： 201454 查看本文章

这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。

而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

【建议】

这里我建议用jquery的方法，只要加载完文档树即可。否则会影响用户体验

【案例】

/*loading加载*/
        .loader {
            position: fixed;
            z-index: 9999;
            width: 100%;
            height: 100%;
            background: rgba(255,255,255,0.9);
            text-align: center;
            /* loader页面消失采用渐隐的方式*/
            -webkit-transition: opacity 1s ease;
            -moz-transition: opacity 1s ease;
            -o-transition: opacity 1s ease;
            transition: opacity 1s ease;
        }

        /* 使用base64编码嵌入加载的logo */
        .loader-content {
            background:none;
            display: block;
            position: relative;
            padding-top: 50px;
            top: 45%;

        }

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

        /* logo出现动画 */
        @-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);
            }
        }
/*加载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" ;//使用渐隐的方法淡出loading page
                setTimeout(function(){loader.style.display="none"},500)
            },500)//强制显示loading page 1s
        })

loading页面等待加载案例（附源码）

猜你喜欢