网页loading(加载)效果的实现

说到页面loading效果,现在各种PC端和移动端的应用使用loading都十分的广泛,这是因为页面的加载时需要时间的,如果页面加载很快,loading的作用可能还不是特别能够体现,但是如果当页面加载速度不是很快甚至很慢的时候,页面就会出现白屏的状况,如果没有使用loading来和用户进行交互,用户并不知道应用到底是出现什么问题(卡死、出错或者在加载)那么就会十分的影响用户体验,页面加载所需要时间越长,那么可能损失的用户量就会多。所以在恰当的时候使用loading是解决网页加载缓慢时与用户交互的最好解决方案。下面就说一说笔者本人如何实现页面loading效果的。如有大家更好的解决方案,也可以分享出来。

简单loading效果的实现

loading直译就是正在加载中的意思,也就是在页面加载的时候loading效果要出现,页面加载完成的时候让其消失。那么以什么来判断页面加载完成为节点去取消loading效果很重要,DOM元素加载完成,还是页面中的所有关联文件(包括图片),jquery给出了两个函数来判断这两个节点, $(document).ready()是在页面上所有DOM元素加载完毕后才执行$(window).load();方法是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行,如何选择则看实际情况去选择,笔者使用的是$(window).load()方法,因为页面上一般来说图片的加载最耗费时间,弄清楚这个的话,实现起来就不复杂了,在页面<body>标签的顶部来添加loading层,以为DOM元素的加载时从上往下的,放在最顶部可以保证loading效果会最早出现。
[css]  view plain  copy
 print ?
  1. <div id="loading">  
  2.   <img src="photos/loading/2.gif" class="img-responsive">  
  3. </div><pre name="code" class="css">  
[css]  view plain  copy
 print ?
  1. #loading  
  2. {  
  3.     position:fixed;  
  4.     top:40%;  
  5.     left:45%;  
  6.     z-index:999;  
  7. }  
加载的动态图可以自己定义,但是越小越好,以为页面中图片的加载时无序的,动态图太大,可能加载不出来,导致效果无法实现。loading效果出现后,在页面加载完成后,就要让其消失。
 
 
[html]  view plain  copy
 print ?
  1. $(window).load(function(){  
  2.     //适当延迟隐藏,提高loading效果  
  3.     //$('#loading_all').delay(1000).hide(0);  
  4.     $('#loading_bottom').hide(0);  
  5. });  
 
 
 
 到这里一个简单的loading效果就完成了,如果不想在每个页面中都加入loading层,那么可以写一个通用的方法,在页面初始化的时候,向页面中插入loading层。 
 
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. var str = "";     
  2. str+="<div id=\"loading\">";  
  3. str+="   <img src=\"${ctx}photos/loading/2.gif\" class=\"img-responsive\">";  
  4. str+="</div>";  
  5. var htmldata = str;  
  6. $ ('body *:first').before(htmldata);  
下面提供一种针对ajax请求loading效果实现的方法,仅供参考。
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. $(window).load(function(){  
  2.     //为ajax绑定loading_bottom  
  3.     $(document).ajaxStart(function(){  
  4.         $("#loading").show();//在ajax请求开始的时候启用loading  
  5.     }).ajaxStop(function(){  
  6.         $('#loading').hide(0);//在ajax请求结束后隐藏loading  
  7.     });  
  8. });  

仿部分原生APPloading效果的实现

大家可以看到部分原生APP的loading效果是在加载的时候好像先进入一个loading页面,在目标页面加载完成后,才跳转到另一个页面,在加载过程中你是看不到需要加载的页面情况的。那么这个效果应该如何实现?

首先想到的就是在页面顶部加入一个loading层,这个层的高度和宽度和页面的高度和宽度应该一样,并且遮盖着这个页面,在这个层的中间加入loading图或者CSS3写的loading效果,简单的思路成型了。

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. <div id="loading_all">  
  2.          <div>  
  3.              <img src="photos/loading/1.gif" class="img-responsive">  
  4.          </div>  
  5. </div>  
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #loading_all  
  2. {        width:100%;  
  3.         height:100%;  
  4.         position:fixed;  
  5.         z-index:999;  
  6.         background-color:white;  
  7. }  
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. #loading_all div  
  2. {  
  3.       position:absolute;  
  4.     width:60px;  
  5.     height:60px;  
  6.     top:50%;  
  7.     margin-top:-60px;  
  8.     left:50%;  
  9.     margin-left:-30px;  
  10. }  
 
在页面顶部加入loading层之后,那么整个真实加载的页面就被遮盖了,但是如果下层的页面高度是高于整个屏幕的高度,那么就会出现滚动条,用户在加载的时候是可以拖动滚动条的,虽然loading层的定位是使用fixed,但是还是会影响一些效果,那么这个时候我们就需要在页面加载的时候禁用滚动条,然后再页面加载完成,取消loading效果的时候再恢复滚动条。禁用滚动条就在<body>标签上加上class="scoll_dis" 
 

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. /*滚动条禁用*/  
  2. .scoll_dis  
  3. {  
  4.     overflow:scroll;  
  5.     overflow-y:hidden;  
  6. }  

页面加载完成后恢复滚动条。

[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. $(window).load(function(){  
  2.     $('#loading_all').delay(300).hide(0);  
  3.     setTimeout(function(){  
  4.         $('body').removeClass("scoll_dis");  
  5.     },300);  
  6. });  
PC端的loading效果就完成了,为什么说PC端,是因为以上禁用滚动条的方法在移动端是无效的,屏幕还是可以被拖动。所以针对移动端,在页面加载时要禁止屏幕的触摸事件,加载完成后要恢复触摸事件。
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. //阻止触摸事件  
  2. document.addEventListener("touchmove", myFunction);  
  3. function myFunction(e) {  
  4.     e.preventDefault();   
  5. }  
[html]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. //解除触摸锁定  
  2. document.removeEventListener("touchmove", myFunction);  
 

 
这样一个兼容移动端的效果就实现了。
                
  • 1
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值