js实现页面加载的等待效果

原理：页面先显示加载的loading图片，然后你获取你要加载的页面是否都加载完毕，再用onload将loading图片隐藏掉就可以

方法有两张：

①利用jq中 $("document").ready() 与 js 中的 window.onload 事件的时间差
window.onload事件实在所有的图片加载完才触发的，ready事件是在所有dom加载完触发的，这时候图片还没有完全加载完，所以有个时间差

②用js控制加载动画显示时间

这里因为没有具体要求，所以我用了第二种比较简便的方法

代码：

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

    </style>
</head>
<body>
<div style="height: 1000px;width: 100%;background-color: #43CD80"></div>
<script>
    //获取浏览器页面可见高度和宽度
    var _PageHeight = document.documentElement.clientHeight,
        _PageWidth = document.documentElement.clientWidth;
    //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
    var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
        _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
    //在页面未加载完毕之前显示的loading Html自定义内容
    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;">' +
            '页面加载中，请等待...' +
            '</div>' +
        '</div>';
    //css样式

    //呈现loading效果
    document.write(_LoadingHtml);
    //监听加载状态改变
    document.onreadystatechange = completeLoading;
    //加载状态为complete时移除loading效果
    function completeLoading() {
        setTimeout(function () {
            if (document.readyState == "complete") {
                var loadingMask = document.getElementById('loadingDiv');
                loadingMask.parentNode.removeChild(loadingMask);
            }
        },1000);

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

我用setTimeout控制动画显示时间为1秒，一般顶部DOM都会加载完成，这样就不会影响样式布局显示了

也就避免了客户等待时间过长等问题，提高了体验

附加：网页loading GIF动态图
网址：http://www.lanrentuku.com/gif/a/loading.html

js实现页面加载的等待效果

猜你喜欢