手记

分享,在网页中加入loading动画

1、在页面未加载完毕之前显示的loading Html自定义内容 两层div 外层是div背景,全屏加背景色能够盖住网页内容 内层div是gif动画

var _LoadingHtml = '<div id="loadingDiv" ><div  ></div></div>';

2、呈现loading效果

document.write(_LoadingHtml);

3、监听加载状态改变

document.onreadystatechange = function completeLoading() {
        //加载状态为complete时移除loading效果
        if (document.readyState == "complete") {
            document.getElementById("page1").style.display = "block";//#page是你第一个页面
            var loadingMask = document.getElementById('loadingDiv'); //获取动画预加载动画的div
            loadingMask.parentNode.removeChild(loadingMask); //找到加载动画父级,然后删除自己
        }
    }

4、将这段代码插入到head标签中,也可以作为外部js 加在页面中

13人推荐
随时随地看视频
慕课网APP