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:' + _PageHe
ight + 'px;top:0;background:#f3f8ff;opacity:0.8;filter:alpha(opacity=80);z-index:10000;"><div complete") {
var loadingMask = ElementById('loadingDiv');
veChild(loadingMask);
}
}
⼆、效果：
说明：
将此段js代码放⼊<head>最后即可；
其中loading效果的样式可以根据⾃⼰的风格修改，loading.gif这个图⽚需要⾃⼰（⽹上很多的）。
完整demo实例代码点击此处。
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》、《》及《》
希望本⽂所述对⼤家jQuery程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。