js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
js实现的页⾯加载完毕之前loading提⽰效果完整⽰例【附demo源码下载】
本⽂实例讲述了js实现的页⾯加载完毕之前loading提⽰效果。
分享给⼤家供⼤家参考，具体如下：
⼀、JS代码：
//获取浏览器页⾯可见⾼度和宽度
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%;height:' + _PageHeight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'p //呈现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);
}
}
⼆、效果：
说明：
将此段js代码放⼊<head>最后即可；
其中loading效果的样式可以根据⾃⼰的风格修改，loading.gif这个图⽚需要⾃⼰找（⽹上很多的）。
完整demo实例代码点击此处。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》、《》及《》
希望本⽂所述对⼤家jQuery程序设计有所帮助。