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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
javascript 建设银行登陆键盘
Jun 10 Javascript
DOM下的节点属性和操作小结
May 14 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
jQuery中height()方法用法实例
Dec 24 Javascript
ajax+jQuery实现级联显示地址的方法
May 06 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
javascript cookie的基本操作(添加和删除)
Jul 24 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
JavaScript简单实现的仿微博留言功能示例
Jan 17 Javascript
JS+CSS实现过渡特效
Jan 02 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
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
在laravel中实现ORM模型使用第二个数据库设置
2019/10/24 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
2013/06/26 Javascript
JavaScript避免内存泄露及内存管理技巧
2014/09/05 Javascript
深入理解JavaScript系列(38):设计模式之职责链模式详解
2015/03/04 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
javascript高级编程之函数表达式 递归和闭包函数
2015/11/29 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
js友好的时间返回函数
2016/08/24 Javascript
JS简单获取当前日期和农历日期的方法
2017/04/17 Javascript
简单实现jquery隔行变色
2017/11/09 jQuery
详解JavaScript 的变量
2019/03/08 Javascript
this.$toast() 了解一下?
2019/04/18 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
[07:20]2014DOTA2西雅图国际邀请赛 选手讲解积分赛第二天
2014/07/11 DOTA
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python 如何快速找出两个电子表中数据的差异
2017/05/26 Python
python 将md5转为16字节的方法
2018/05/29 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
python使用建议技巧分享(三)
2020/08/18 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
希腊品牌鞋类销售网站:epapoutsia.gr
2020/03/18 全球购物
班级入场式解说词
2014/02/01 职场文书
宣传工作经验材料
2014/06/02 职场文书
中专毕业生的自荐书
2014/07/01 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
浅谈MySQL之select优化方案
2021/08/07 MySQL
JavaScript中的宏任务和微任务详情
2021/11/27 Javascript
Python+腾讯云服务器实现每日自动健康打卡
2021/12/06 Python