全国服务热线:400-6566-535 广州热线:020-82105691 客服QQ:858560031
后台演示 模板汇 猪八戒 阿里巴巴商铺 手机版
网络营销电子商务建站知识编程知识行业资讯SEO知识常见问题网络安全
您当前位置: 首页 >资讯活动 > 建站知识 > js实现页面加载完毕之前loading提示效果 ?

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

时间:2016-11-07 作者:七想网络

 

js实现页面加载完毕之前loading提示效果:在页面上所有的DOM没有加载完毕之前,我们想让页面正中间显示一个“页面加载中,请稍后...”的字样,此效果正是,样式可以根据自己的需求改动!!!



//获取浏览器页面可见高度和宽度
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:1;filter:alpha(opacity=80);z-index:10000;"><div style="position: absolute; cursor1: wait; left: ' + _LoadingLeft + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(../statics/templates/MoBans/images/loading.gif) no-repeat scroll 5px 10px; color: #696969; font-family:'Microsoft YaHei';">页面加载中,请等待...</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);
    }
}


 

准备开展业务? 立即创建网站 成为代理商
网络营销
  1. 企业网站如何做好网站优化与推广工作?
  2. 中小企业怎样做网络营销 广州七想网络...
  3. 网络营销并不神秘,七想网络带您揭开秘...
  4. 透过优衣库事件 看网络营销?
  5. QQ营销推广技巧?
  6. 中小企业网站如何推广才有效果呢?