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 相关文章推荐
firebug的一个有趣现象介绍
Nov 30 Javascript
jquery对单选框,多选框,文本框等常见操作小结
Jan 08 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
javascript的push使用指南
Dec 05 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
招聘网站基于jQuery实现自动刷新简历
May 10 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 Javascript
使用vue实现简单键盘的示例(支持移动端和pc端)
Dec 25 Javascript
vue兄弟组件传递数据的实例
Sep 06 Javascript
JS实现贪吃蛇游戏
Nov 15 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
常用的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
索尼SONY ICF-7600A(W)电路分析
2021/03/01 无线电
PHP写MySQL数据 实现代码
2009/06/15 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php中实现xml与mysql数据相互转换的方法
2014/12/25 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
XmlUtils JS操作XML工具类
2009/10/01 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
JQuery EasyUI Layout 在from布局自适应窗口大小的实现方法
2016/05/28 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
nuxt.js 缓存实践
2018/06/25 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
微信小程序云函数使用mysql数据库过程详解
2019/08/07 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
Python获取当前函数名称方法实例分享
2018/01/18 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
解决python写入带有中文的字符到文件错误的问题
2019/01/31 Python
使用python实现ftp的文件读写方法
2019/07/02 Python
浅析python内置模块collections
2019/11/15 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
Python爬虫实现selenium处理iframe作用域问题
2021/01/27 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
北京银河万佳Java面试题
2012/03/21 面试题
盛大二次面试题
2016/11/18 面试题
2013年保送生自荐信格式
2013/11/20 职场文书
女方婚礼新郎答谢词
2014/01/11 职场文书
初三家长会邀请函
2014/01/18 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
婚礼家长致辞
2015/07/27 职场文书
2016年度继续教育学习心得体会
2016/01/19 职场文书
python pygame 开发五子棋双人对弈
2022/05/02 Python
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js