简单loading效果的实现
loading直译就是正在加载中的意思,也就是在页面加载的时候loading效果要出现,页面加载完成的时候让其消失。那么以什么来判断页面加载完成为节点去取消loading效果很重要,DOM元素加载完成,还是页面中的所有关联文件(包括图片),jquery给出了两个函数来判断这两个节点,$(document).ready()是在页面上所有DOM元素加载完毕后才执行$(window).load();方法是在网页中所有的元素(包括元素的关联文件)完全加载到浏览器后才执行,如何选择则看实际情况去选择,笔者使用的是$(window).load()方法,因为页面上一般来说图片的加载最耗费时间,弄清楚这个的话,实现起来就不复杂了,在页面<body>标签的顶部来添加loading层,以为DOM元素的加载时从上往下的,放在最顶部可以保证loading效果会最早出现。[css] view plain copy
- <div id="loading">
- <img src="photos/loading/2.gif" class="img-responsive">
- </div><pre name="code" class="css">
[css] view plain copy
- #loading
- {
- position:fixed;
- top:40%;
- left:45%;
- z-index:999;
- }
加载的动态图可以自己定义,但是越小越好,以为页面中图片的加载时无序的,动态图太大,可能加载不出来,导致效果无法实现。loading效果出现后,在页面加载完成后,就要让其消失。
[html] view plain copy
- $(window).load(function(){
- //适当延迟隐藏,提高loading效果
- //$('#loading_all').delay(1000).hide(0);
- $('#loading_bottom').hide(0);
- });
到这里一个简单的loading效果就完成了,如果不想在每个页面中都加入loading层,那么可以写一个通用的方法,在页面初始化的时候,向页面中插入loading层。[html] view plain copy
- var str = "";
- str+="<div id=\"loading\">";
- str+=" <img src=\"${ctx}photos/loading/2.gif\" class=\"img-responsive\">";
- str+="</div>";
- var htmldata = str;
- $ ('body *:first').before(htmldata);
下面提供一种针对ajax请求loading效果实现的方法,仅供参考。[html] view plain copy
- $(window).load(function(){
- //为ajax绑定loading_bottom
- $(document).ajaxStart(function(){
- $("#loading").show();//在ajax请求开始的时候启用loading
- }).ajaxStop(function(){
- $('#loading').hide(0);//在ajax请求结束后隐藏loading
- });
- });
仿部分原生APPloading效果的实现
大家可以看到部分原生APP的loading效果是在加载的时候好像先进入一个loading页面,在目标页面加载完成后,才跳转到另一个页面,在加载过程中你是看不到需要加载的页面情况的。那么这个效果应该如何实现?
首先想到的就是在页面顶部加入一个loading层,这个层的高度和宽度和页面的高度和宽度应该一样,并且遮盖着这个页面,在这个层的中间加入loading图或者CSS3写的loading效果,简单的思路成型了。
[html] view plain copy
- <div id="loading_all">
- <div>
- <img src="photos/loading/1.gif" class="img-responsive">
- </div>
- </div>
[html] view plain copy
- #loading_all
- { width:100%;
- height:100%;
- position:fixed;
- z-index:999;
- background-color:white;
- }
[html] view plain copy
- #loading_all div
- {
- position:absolute;
- width:60px;
- height:60px;
- top:50%;
- margin-top:-60px;
- left:50%;
- margin-left:-30px;
- }
在页面顶部加入loading层之后,那么整个真实加载的页面就被遮盖了,但是如果下层的页面高度是高于整个屏幕的高度,那么就会出现滚动条,用户在加载的时候是可以拖动滚动条的,虽然loading层的定位是使用fixed,但是还是会影响一些效果,那么这个时候我们就需要在页面加载的时候禁用滚动条,然后再页面加载完成,取消loading效果的时候再恢复滚动条。禁用滚动条就在<body>标签上加上class="scoll_dis"
[html] view plain copy
- /*滚动条禁用*/
- .scoll_dis
- {
- overflow:scroll;
- overflow-y:hidden;
- }
页面加载完成后恢复滚动条。
[html] view plain copy
- $(window).load(function(){
- $('#loading_all').delay(300).hide(0);
- setTimeout(function(){
- $('body').removeClass("scoll_dis");
- },300);
- });
PC端的loading效果就完成了,为什么说PC端,是因为以上禁用滚动条的方法在移动端是无效的,屏幕还是可以被拖动。所以针对移动端,在页面加载时要禁止屏幕的触摸事件,加载完成后要恢复触摸事件。
[html] view plain copy
- //阻止触摸事件
- document.addEventListener("touchmove", myFunction);
- function myFunction(e) {
- e.preventDefault();
- }
[html] view plain copy
- //解除触摸锁定
- document.removeEventListener("touchmove", myFunction);
这样一个兼容移动端的效果就实现了。