前言：

现在做页面一般为了提示友好点，一般会做个页面正在加载的loading提示效果，当页面加载完毕后再显示内容！这个时候就需要监控页面的资源加载的情况，有时候这并不好做，因为页面涉及图片，视频，已经js等等资源。所以我们在做loading的时候可以采用模拟的情况，适当给页面加载一定时间的loading提示！

这里不多说，先加上代码

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
  6.     <title>loading</title>
  7. </head>
  8. <body>
  9.     fgdfgfdgdfgdfgdfgdfgf
  10. </body>
  11. </html>
  12. <script>
  13.     /*
  14.         autor : shizhouyu
  15.         方法：
  16.         loading(time,loadimg)
  17.         参数说明：
  18.             time loading加载几时关闭，不传或者传为0视为不关闭
  19.             loadimg：动态转动的图片，不传则只显示文字
  20.         方法：
  21.         removeLoading()
  22.         删除正在运行的loading层
  23.     */
  24.     ;(function($){
  25.         function isIE(){//判断IE
  26.             if(window.navigator.userAgent.toLowerCase().indexOf('msie') >= 1){
  27.                 return true;
  28.             }
  29.             else{
  30.                 return false;
  31.             }
  32.         }
  33.         if(!isIE()){
  34.             HTMLElement.prototype.__defineGetter__('innerText', function(){//定义方法，兼容火狐方法textContent
  35.                     var str = '';
  36.                     var childS = this.childNodes;
  37.                     for(var i = 0; i< childS.length; i++) {
  38.                     if(childS[i].nodeType == 1){
  39.                         str += childS[i].tagName == 'BR' ? '\n' : childS[i].textContent;//处理换行
  40.                     }
  41.                     else if(childS[i].nodeType == 3)
  42.                         str += childS[i].nodeValue;
  43.                     }
  44.                     return str;
  45.                 }
  46.             );
  47.             HTMLElement.prototype.__defineSetter__('innerText', function(sText){
  48.                     this.textContent = sText;
  49.                 }
  50.             );
  51.         }
  52.         $.loading = function(time,loadimg){
  53.             if(arguments.length == 0){
  54.                 time = 0;loadimg='';//处理参数
  55.             }
  56.             if(arguments.length == 1){
  57.                 time = arguments[0];loadimg='';
  58.             }
  59.             var div = document.createElement('div');
  60.             var smallD = document.createElement('div');
  61.             div.style.height = '100%';
  62.             div.style.width = '100%';
  63.             div.style.zIndex = 99999;
  64.             div.style.position = 'fixed';
  65.             div.style.backgroundColor = '#fff';
  66.             div.style.top = 0;
  67.             div.style.left = 0;
  68.             div.id = 'loading_szy_ver1';
  69.             smallD.style.height = '50px';
  70.             smallD.style.width = '190px';
  71.             smallD.style.zIndex = 999999;
  72.             smallD.style.position = 'absolute';
  73.             smallD.style.borderWidth = '1px';
  74.             smallD.style.borderStyle = 'solid';
  75.             smallD.style.borderColor = '#216DCC';
  76.             smallD.style.top = '50%';
  77.             smallD.style.left = '50%';
  78.             smallD.style.marginTop = '-25px';
  79.             smallD.style.marginLeft = '-95px';
  80.             var img = '';
  81.             var temp = '';
  82.             if(loadimg != ''){
  83.                 img = '<img src = "'+ loadimg +'" width="35" height="35" style="position:absolute;top:7px;left:7px;"/>';
  84.                 temp = '<p style="position:absolute;top:17px;left:50px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
  85.             }else{
  86.                 temp = '<p style="position:absolute;top:17px;left:20px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
  87.             }
  88.             smallD.innerHTML = img + temp;
  89.             div.appendChild(smallD);
  90.             document.body.appendChild(div);
  91.             var flag = 1;
  92.             var timep = setInterval(function(){
  93.                 var p = smallD.getElementsByTagName('p')[0];
  94.                 if(flag == 1){
  95.                     p.innerText = '页面加载中，请稍后..';flag = 2;
  96.                 }else if(flag == 2){
  97.                     p.innerText = '页面加载中，请稍后...';flag = 3;
  98.                 }else if(flag == 3){
  99.                     p.innerText = '页面加载中，请稍后....';flag = 4;
  100.                 }else{
  101.                     p.innerText = '页面加载中，请稍后.';flag = 1;
  102.                 }
  103.             },300);
  104.             if(!!time){
  105.                 var timer = setTimeout(function(){
  106.                     if(div && div.parentNode && div.tagName != 'BODY'){
  107.                         div.parentNode.removeChild(div);
  108.                     }
  109.                 },time*1000);
  110.             }
  111.         };
  112.         $.removeLoading = function(){
  113.             var n = document.getElementById('loading_szy_ver1');
  114.             if(n && n.parentNode && n.tagName != 'BODY'){
  115.                 n.parentNode.removeChild(n);
  116.             }
  117.         };
  118.     })(window);
  119.     loading(0,'loading.gif');
  120. </script>

增加cookie判断是否是第一次加载页面

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8"/>
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1"/>
  6.     <title>loading</title>
  7. </head>
  8. <body>
  9.     fgdfgfdgdfgdfgdfgdfgf
  10. </body>
  11. </html>
  12. <script>
  13.     /*
  14.         autor : shizhouyu
  15.         方法：
  16.         loading(time,loadimg)
  17.         参数说明：
  18.             time loading加载几时关闭，不传或者传为0视为不关闭
  19.             loadimg：动态转动的图片，不传则只显示文字
  20.         方法：
  21.         removeLoading()
  22.         删除正在运行的loading层
  23.     */
  24.     ;(function($){
  25.         function isIE(){
  26.             if(window.navigator.userAgent.toLowerCase().indexOf('msie') >= 1){
  27.                 return true;
  28.             }
  29.             else{
  30.                 return false;
  31.             }
  32.         }
  33.         if(!isIE()){
  34.             HTMLElement.prototype.__defineGetter__('innerText', function(){
  35.                     var str = '';
  36.                     var childS = this.childNodes;
  37.                     for(var i = 0; i< childS.length; i++) {
  38.                     if(childS[i].nodeType == 1){
  39.                         str += childS[i].tagName == 'BR' ? '\n' : childS[i].textContent;
  40.                     }
  41.                     else if(childS[i].nodeType == 3)
  42.                         str += childS[i].nodeValue;
  43.                     }
  44.                     return str;
  45.                 }
  46.             );
  47.             HTMLElement.prototype.__defineSetter__('innerText', function(sText){
  48.                     this.textContent = sText;
  49.                 }
  50.             );
  51.         }
  52.         $.cookieSet = function(name, val, parm) {
  53.             var d;
  54.             parm.G && (d = new Date, d.setTime(d.getTime() + parm.G));
  55.             document.cookie = name + "=" + val +(d ? "; expires=" + d.toGMTString() : "") +'; domain='+ (parm.domin ? parm.domin : '') +'; path='+(parm.path ? parm.path : '')+';';
  56.         };
  57.         $.cookieGet = function(name) {
  58.             return (name = RegExp("(^| )" + name + "=([^;]*)(;|$)").exec(document.cookie)) ? name[2] : null;
  59.         };
  60.         $.loading = function(time,loadimg){
  61.             var cookieEN = cookieGet('loadF');
  62.             if(!cookieEN){
  63.                 cookieSet('loadF',1,{'G':30*60*1000});
  64.                 if(arguments.length == 0){
  65.                     time = 0;loadimg='';
  66.                 }
  67.                 if(arguments.length == 1){
  68.                     time = arguments[0];loadimg='';
  69.                 }
  70.                 var div = document.createElement('div');
  71.                 var smallD = document.createElement('div');
  72.                 div.style.height = '100%';
  73.                 div.style.width = '100%';
  74.                 div.style.zIndex = 99999;
  75.                 div.style.position = 'fixed';
  76.                 div.style.backgroundColor = '#fff';
  77.                 div.style.top = 0;
  78.                 div.style.left = 0;
  79.                 div.id = 'loading_szy_ver1';
  80.                 smallD.style.height = '50px';
  81.                 smallD.style.width = '190px';
  82.                 smallD.style.zIndex = 999999;
  83.                 smallD.style.position = 'absolute';
  84.                 smallD.style.borderWidth = '1px';
  85.                 smallD.style.borderStyle = 'solid';
  86.                 smallD.style.borderColor = '#216DCC';
  87.                 smallD.style.top = '50%';
  88.                 smallD.style.left = '50%';
  89.                 smallD.style.marginTop = '-25px';
  90.                 smallD.style.marginLeft = '-95px';
  91.                 var img = '';
  92.                 var temp = '';
  93.                 if(loadimg != ''){
  94.                     img = '<img src = "'+ loadimg +'" width="35" height="35" style="position:absolute;top:7px;left:7px;"/>';
  95.                     temp = '<p style="position:absolute;top:17px;left:50px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
  96.                 }else{
  97.                     temp = '<p style="position:absolute;top:17px;left:20px;margin:0;padding:0;line-height:16px;font-size:12px;">页面加载中，请稍后.</p>';
  98.                 }
  99.                 smallD.innerHTML = img + temp;
  100.                 div.appendChild(smallD);
  101.                 document.body.appendChild(div);
  102.                 var flag = 1;
  103.                 var timep = setInterval(function(){
  104.                     var p = smallD.getElementsByTagName('p')[0];
  105.                     if(flag == 1){
  106.                         p.innerText = '页面加载中，请稍后..';flag = 2;
  107.                     }else if(flag == 2){
  108.                         p.innerText = '页面加载中，请稍后...';flag = 3;
  109.                     }else if(flag == 3){
  110.                         p.innerText = '页面加载中，请稍后....';flag = 4;
  111.                     }else{
  112.                         p.innerText = '页面加载中，请稍后.';flag = 1;
  113.                     }
  114.                 },300);
  115.                 if(!!time){
  116.                     var timer = setTimeout(function(){
  117.                         if(div && div.parentNode && div.tagName != 'BODY'){
  118.                             div.parentNode.removeChild(div);
  119.                         }
  120.                     },time*1000);
  121.                 }
  122.             }
  123.         };
  124.         $.removeLoading = function(){
  125.             var n = document.getElementById('loading_szy_ver1');
  126.             if(n && n.parentNode && n.tagName != 'BODY'){
  127.                 n.parentNode.removeChild(n);
  128.             }
  129.         };
  130.     })(window);
  131.     loading(10,'loading.gif');
  132. </script>

增加的cookie判断是否是第一次加载页面，如果没有就显示loading,如果不是第一次加载，则直接显示页面不显示loading,loading的显示的cookie设置时间是30分钟，超过30分钟认为又是新页面的，需要重新显示loading层！

js用法很简单，不传值的情况下会一直显示显示loading,这个时候可以配合页面资源加载完毕后再调用removeLoading()删除loading层就可以了。

页面loading另外一种用法！

页面进来先执行loading,等图片全部加载完成后再删除loading层，这里涉及计算页面所有的图片的路径的方法，这里附上实例代码！

  1. function getImgUrl(){//获取绑定到元素上的所有的图片路径
  2.     var mydiv = document.getElementsByTagName('*');
  3.     var obj = [];
  4.     var pattern = /url\((.*\.(jpg|png|gif|bmp))\)/;
  5.     for(var i=0;i < mydiv.length;i++){
  6.         if(mydiv[i].currentStyle) {
  7.             var pattern = /url\(\"(.*\.(jpg|png|gif|bmp))\"\)/;
  8.             var img = mydiv[i].currentStyle['backgroundImage'].toString();
  9.             if(img != 'none'){
  10.                 if(pattern.test(img)){
  11.                     obj.push(RegExp.$1);
  12.                 }
  13.             }else{
  14.               continue;
  15.             }
  16.         } else if(window.getComputedStyle) {
  17.             var pattern = /url\((.*\.(jpg|png|gif|bmp))\)/;
  18.             var img = window.getComputedStyle(mydiv[i] , null)['backgroundImage'].toString();
  19.             if(img != 'none'){
  20.                 if(pattern.test(img)){
  21.                     obj.push(RegExp.$1);
  22.                 }
  23.             }else{
  24.                 continue;
  25.             }
  26.         }
  27.     }
  28.     return obj;
  29. }
  30. loading(0,'images/loading.gif');
  31. var obj_img = getImgUrl();
  32. var _l = obj_img.length;
  33. var oc = 0;
  34. for(var i = 0;i < _l; i++){
  35.     var img = new Image();
  36.     img.onload = function(){
  37.         oc++;
  38.         if(oc >= _l){
  39.             removeLoading();
  40.             $('.w').show();
  41.         }
  42.     }
  43.     img.src = obj_img[i];
  44.     img.onload = img.onerror = img.onabort = function(){
  45.          oc++;
  46.          if(oc >= _l){
  47.             removeLoading();
  48.             $('.w').show();
  49.         }
  50.     }
  51. }

页面loading提示效果的更多相关文章

  1. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

  2. js实现的页面加载完毕之前loading提示效果

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  3. salesforce 零基础学习（二十七）VF页面等待（loading）效果制作

    进行查询的情况下,显示友好的等待效果可以让用户更好的了解目前的状态以及减少用户消极的等待,例如下图所示. VF提供了<apex:actionStatus>标签,,此标签用于显示一个AJAX ...

  4. vue实战之狗血事件：页面loading效果诡异之事

    接上回 想加一个切换路由时,跳出一个loading动画 ,路由加载后就消失 先做了一个loading提示的浮动层的组件,全局注册,在几个路由页面都引入 在vuex里面维护一个变量比如isLoading ...

  5. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  6. Fort.js – 时尚、现代的表单填写进度提示效果

    Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...

  7. SweetAlert – 替代 Alert 的漂亮的提示效果

    Sweet Alert 是一个替代传统的 JavaScript Alert 的漂亮提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒.另外提 ...

  8. BootStrap入门教程 (四) ：JQuery类库插件（模态窗口，滚动监控，标签效果，提示效果，“泡芙”效果，警告区域，折叠效果，旋转木马，输入提示）

    上讲回顾:Bootstrap组件丰富同时具有良好可扩展性,能够很好地应用在生产环境.这些组件包括按钮(Button),导航(Navigation),缩略图( thumbnails),提醒(Alert) ...

  9. js简单实现删除记录时的提示效果

    删除记录时的提示效果,挺人性化的,实现的方法有很多,在本文为大家介绍下使用js是如何实现的 样式 复制代码代码如下: <style type="text/css">  ...

随机推荐

  1. oracle 10g操作和维护手册

    1.    检查数据库基本状况... 1.1.     检查Oracle实例状态... 1.2.     检查Oracle服务进程... 1.3.     检查Oracle监听状态... 2.    ...

  2. ftp的port和pasv型号比较

    一个.ftp的port和pasv工作方式        FTP使用2个TCPport,首先是建立一个命令port(控制port),然后再产生一个数据port. 国内非常多教科书都讲ftp使用21命令p ...

  3. Linux下is not in the sudoers file（转）

    用sudo时提示"xxx is not in the sudoers file. This incident will be reported.其中XXX是你的用户名,也就是你的用户名没有权 ...

  4. CentOS7 安装NFS SSH免密码登陆

    配置5台虚拟机 ip为192.168.1.160 - 164,使用160作为共享服务器 使用yum安装nfs 以及rpcbind,有很多文章介绍,这里不再赘述 一.启动服务 1.启动rpcbind s ...

  5. 批处理命令行CMD启动停止重启IIS的命令

    原文:批处理命令行CMD启动停止重启IIS的命令 启动IIS: net start iisadmin    (IIS的整个服务) net start w3svc       (WWW网页WEB服务) ...

  6. android_线

    说明:android螺纹. android无非就是一个线程Main Thread和Worker Thread.(除了主线程Main Thread是Worker Thread) Main Thread ...

  7. HDU 4946 Area of Mushroom 凸包 第八次多校

    题目链接:hdu 4946 题意:一大神有N个学生,各个都是小神,大神有个二次元空间,每一个小神都有一个初始坐标,如今大神把这些空间分给徒弟们,规则是假设这个地方有一个人比谁都先到这,那么这个地方就是 ...

  8. UBUNTU如何改变mysql默认文件夹数据文件夹

    停止mysql维修 * sudo /etc/init.d/mysql stop 原始文件夹的副本 * cp -r /var/lib/mysql /home/yourname/somewhere 改动权 ...

  9. C#记录日志、获取枚举值 等通用函数列表

    )             {                 ] >=  && ipvals[] <=                  && ipval ...

  10. 采用RedisLive监控Redis服务

    1.基础环境安装https://pypi.python.org/packages/source/b/backports.ssl_match_hostname/backports.ssl_match_h ...