JS实现页面加载完毕之前loading提示效果

http://qubernet.blog.163.com/blog/static/1779472842014510392573/
得拿到本地看图片位置容易调

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <iframe src="http://mote.xcabc.com/" style="width:100%;height:1000px"></iframe> <script type="text/javascript"> //获取浏览器页面可见高度和宽度 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:fixed;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#000;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div style="position: fixed; cursor1: wait; left:50%;margin-left: -80px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px;color: #fff; font-family:\'Microsoft YaHei\';"><img src="http://www.wufangbo.com/wp-content/uploads/2014/11/loading-7.gif" style="position: absolute;left: -50px;top: -35px;"/>如果需要文字</div></div>'; //呈现loading效果 document.write(_LoadingHtml); // window.onload = function () { // var loadingMask = document.getElementById('loadingDiv'); // loadingMask.parentNode.removeChild(loadingMask); // }; //监听加载状态改变 // document.onreadystatechange = completeLoading; //加载状态为complete时移除loading效果 // function completeLoading() { // if (document.readyState == "complete") { // var loadingMask = document.getElementById('loadingDiv'); // loadingMask.parentNode.removeChild(loadingMask); // } // } </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » JS实现页面加载完毕之前loading提示效果