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 相关文章推荐
escape、encodeURI、encodeURIComponent等方法的区别比较
Dec 27 Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 Javascript
JObj预览一个JS的框架
Mar 13 Javascript
FormValidate 表单验证功能代码更新并提供下载
Aug 23 Javascript
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
javascript写的一个模拟阅读小说的程序
Apr 04 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 Javascript
js限制文本框只能输入中文的方法
Aug 11 Javascript
Javascript小技能总结(推荐)
Jun 02 Javascript
JavaScript实现的XML与JSON互转功能详解
Feb 16 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
常用的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获得数组交集与差集的方法
2015/06/10 PHP
tp5.1 框架路由操作-URL生成实例分析
2020/05/26 PHP
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
浅析jQuery中常用的元素查找方法总结
2013/07/04 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
2014/09/03 Javascript
一个实用的图片切换支持点击切换和自动轮播
2014/09/09 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
你有必要知道的25个JavaScript面试题
2015/12/29 Javascript
在ASP.NET MVC项目中使用RequireJS库的用法示例
2016/02/15 Javascript
AngularJS学习笔记之依赖注入详解
2016/05/16 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
Angular学习笔记之angular的$filter服务浅析
2016/11/12 Javascript
设置jquery UI 控件的大小方法
2016/12/12 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
JS+CSS实现网页加载中的动画效果
2017/10/27 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
在Vue中使用Select选择器拼接label的操作
2020/10/22 Javascript
Python连接数据库学习之DB-API详解
2017/02/07 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
python实现名片管理系统
2018/11/29 Python
Python 实现中值滤波、均值滤波的方法
2019/01/09 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Python实现的大数据分析操作系统日志功能示例
2019/02/11 Python
Python列表原理与用法详解【创建、元素增加、删除、访问、计数、切片、遍历等】
2019/10/30 Python
VScode连接远程服务器上的jupyter notebook的实现
2020/04/23 Python
澳大利亚拥有最佳跳伞降落点和最好服务的跳伞项目运营商:Skydive Australia
2018/03/05 全球购物
如何开发安全的AJAX应用
2014/03/26 面试题
连带责任保证书
2014/04/29 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
晚会开场白和结束语
2015/05/29 职场文书
十月围城观后感
2015/06/08 职场文书