js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】


Posted in Javascript onAugust 02, 2016

本文实例讲述了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 + 'px; top:' + _LoadingTop + 'px; width: auto; height: 57px; line-height: 57px; padding-left: 50px; padding-right: 5px; background: #fff url(/Content/loading.gif) no-repeat scroll 5px 10px; border: 2px solid #95B8E7; 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);
  }
}

二、效果:

js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

说明:

将此段js代码放入<head>最后即可;
其中loading效果的样式可以根据自己的风格修改,loading.gif这个图片需要自己找(网上很多的)。

完整demo实例代码点击此处本站下载。

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js 函数的副作用分析
Aug 23 Javascript
js实现单一html页面两套css切换代码
Apr 11 Javascript
Underscore.js常用方法总结
Feb 28 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
May 17 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
JS HTML图片显示Canvas 压缩功能
Jul 21 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
js + css实现标签内容切换功能(实例讲解)
Oct 09 Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
js中apply和call的理解与使用方法
Nov 27 Javascript
常用的js验证和数据处理总结
Aug 02 #Javascript
js实现为a标签添加事件的方法(使用闭包循环)
Aug 02 #Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
Aug 02 #Javascript
AngularJS基础 ng-mouseleave 指令详解
Aug 02 #Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 #Javascript
实现React单页应用的方法详解
Aug 02 #Javascript
AngularJS基础 ng-mouseenter 指令示例代码
Aug 02 #Javascript
You might like
php自动获取字符串编码函数mb_detect_encoding
2011/05/31 PHP
php权重计算方法代码分享
2014/01/09 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php使用str_replace实现输入框回车替换br的方法
2014/11/24 PHP
php中关于socket的系列函数总结
2015/05/18 PHP
PHP日志LOG类定义与用法示例
2018/09/06 PHP
解析arp病毒背后利用的Javascript技术附解密方法
2007/08/06 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
javascript实现英文首字母大写
2015/04/23 Javascript
jquery使用经验小结
2015/05/20 Javascript
三分钟带你玩转jQuery.noConflict()
2016/02/15 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
JavaScript中的call和apply的用途以及区别
2017/01/11 Javascript
利用Js+Css实现折纸动态导航效果实例源码
2017/01/25 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
VUE 实现动态给对象增加属性,并触发视图更新操作示例
2019/11/29 Javascript
Python for循环中的陷阱详解
2018/07/13 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python中enumerate() 与zip()函数的使用比较实例分析
2019/09/03 Python
Python命令行参数解析工具 docopt 安装和应用过程详解
2019/09/26 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
Python for循环搭配else常见问题解决
2020/02/11 Python
python名片管理系统开发
2020/06/18 Python
南威尔士家居商店:Leekes
2016/10/25 全球购物
POP文化和音乐灵感的时尚:Hot Topic
2019/06/19 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
驾驶员安全责任书
2014/07/22 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
2015年人事科工作总结
2015/04/28 职场文书
导游词之山东红叶谷
2019/10/31 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL