编程 Javascript

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程序设计有所帮助。

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

- Author -

Quber

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍

Jan 24 Javascript

JS在textarea光标处插入文本的小例子

Mar 22 Javascript

jquery必须知道的一些常用特效方法及使用示例(整理)

Jun 24 Javascript

JQuery插件iScroll实现下拉刷新，滚动翻页特效

Jun 22 Javascript

基于javascript制作微信聊天面板

Aug 09 Javascript

详解JavaScript实现设计模式中的适配器模式的方法

May 18 Javascript

Javascript 详解封装from表单数据为json串进行ajax提交

Mar 29 Javascript

Javascript 实现 Excel 导入生成图表功能

Oct 22 Javascript

加速vue组件渲染之性能优化

Apr 09 Javascript

JS图片预加载三种实现方法解析

May 08 Javascript

npm全局环境变量配置详解

Dec 15 Javascript

一篇文章了解正则表达式的替换技巧

Feb 24 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