说到页面loading效果，现在各种PC端和移动端的应用使用loading都十分的广泛，这是因为页面的加载时需要时间的，如果页面加载很快，loading的作用可能还不是特别能够体现，但是如果当页面加载速度不是很快甚至很慢的时候，页面就会出现白屏的状况，如果没有使用loading来和用户进行交互，用户并不知道应用到底是出现什么问题（卡死、出错或者在加载）那么就会十分的影响用户体验，页面加载所需要时间越长，那么可能损失的用户量就会多。所以在恰当的时候使用loading是解决网页加载缓慢时与用户交互的最好解决方案。下面就说一说笔者本人如何实现页面loading效果的。如有大家更好的解决方案，也可以分享出来。
简单loading效果的实现
loading直译就是正在加载中的意思，也就是在页面加载的时候loading效果要出现，页面加载完成的时候让其消失。那么以什么来判断页面加载完成为节点去取消loading效果很重要，DOM元素加载完成，还是页面中的所有关联文件（包括图片），jquery给出了两个函数来判断这两个节点，
$(document).ready()是在页面上所有DOM元素加载完毕后才执行$(window).load();方法是在网页中所有的元素（包括元素的关联文件）完全加载到浏览器后才执行，如何选择则看实际情况去选择，笔者使用的是$(window).load()方法，因为页面上一般来说图片的加载最耗费时间，弄清楚这个的话，实现起来就不复杂了，在页面<body>标签的顶部来添加loading层，以为DOM元素的加载时从上往下的，放在最顶部可以保证loading效果会最早出现。
加载的动态图可以自己定义，但是越小越好，以为页面中图片的加载时无序的，动态图太大，可能加载不出来，导致效果无法实现。loading效果出现后，在页面加载完成后，就要让其消失。
到这里一个简单的loading效果就完成了，如果不想在每个页面中都加入loading层，那么可以写一个通用的方法，在页面初始化的时候，向页面中插入loading层。
到这里一个简单的loading效果就完成了，如果不想在每个页面中都加入loading层，那么可以写一个通用的方法，在页面初始化的时候，向页面中插入loading层。
大家可以看到部分原生APP的loading效果是在加载的时候好像先进入一个loading页面，在目标页面加载完成后，才跳转到另一个页面，在加载过程中你是看不到需要加载的页面情况的。那么这个效果应该如何实现？
首先想到的就是在页面顶部加入一个loading层，这个层的高度和宽度和页面的高度和宽度应该一样，并且遮盖着这个页面，在这个层的中间加入loading图或者CSS3写的loading效果，简单的思路成型了。
在页面顶部加入loading层之后，那么整个真实加载的页面就被遮盖了，但是如果下层的页面高度是高于整个屏幕的高度，那么就会出现滚动条，用户在加载的时候是可以拖动滚动条的，虽然loading层的定位是使用fixed,但是还是会影响一些效果，那么这个时候我们就需要在页面加载的时候禁用滚动条，然后再页面加载完成，取消loading效果的时候再恢复滚动条。禁用滚动条就在<body>标签上加上class="scoll_dis"
页面加载完成后恢复滚动条。
PC端的loading效果就完成了，为什么说PC端，是因为以上禁用滚动条的方法在移动端是无效的，屏幕还是可以被拖动。所以针对移动端，在页面加载时要禁止屏幕的触摸事件，加载完成后要恢复触摸事件。这样一个兼容移动端的效果就实现了。
698
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
