移动端loading效果js
在等待页面加载的过程中，我们往往需要提供一个loading效果来避免用户看到页面渲染的过程中产生的一些因css、img、js等未加载完成而出现的不理想的页面效果。
大致做法就是：在页面未加载完成之前（当然，也可以在ajax数据未请求完成之前），通过js动态生成一个遮罩层，这个遮罩层里面包含你自己想要显示的loading效果。
这个时候，你的loading遮罩层出现了。你肯定想到，页面这个时候就不能滚动了，对吧。所以还有一个需求，就是禁止浏览器的滚动。
那么，在写loading效果js之前，我先写一个禁止浏览器滚动的问题。
有时候，我们会有这种情况，在页面上点击了一个dom元素，会弹出一个浮层，这个浮层出现的时候，页面保持当前位置并且无法滚动，这是一个很常见的需求。
我这里要说的情况就是，这个浮层里面也会产生滚动条，那么最后我们想要的效果是：浮层出现时，浏览器滚动条位置保持不变，浏览器页面不能滚动，浮层div里面的内容可以滚动。浮层关闭时，浏览器滚动条恢复可滚动。
我在写禁止浏览器页面滚动的时候，开始也是用的这个样式：
html,body {
overflow: hidden;
}
在pc端是好用的，可是在移动端就不灵了。因为移动端是基于touch事件的，至于具体为什么，我也不大懂，反正，总之，肯定的，移动端不灵0.0。
基于上面的分析，我得到下面这段代码：
var ModalHelper = (function(bodyCls) {
var scrolltopVal = document.documentElement.scrollTop || document.body.scrollTop;
return {
//浮层出现
afterOpen: function() { //打开浮层的时候调用
//记录此时浏览器滚动条位置
scrolltopVal = document.documentElement.scrollTop || document.body.scrollTop;
//给body添加一个bodyCls（参数名）类，样式为 bodyCls{position: fixed;width: 100%;}
document.body.classList.add(bodyCls);
document.body.style.top = -scrolltopVal + 'px';
},
//浮层关闭
beforeClose: function() {//关闭浮层的时候调用
//取消body的fixed样式
document.body.classList.remove(bodyCls);
// scrollTop lost after set position:fixed, restore it back.
document.documentElement.scrollTop = document.body.scrollTop = scrolltopVal;
}
};
});
这样，当你在点击页面元素弹出遮罩层的时候，就可以保持浏览器此时的滚动高度并且也无法继续滚动啦。
好了，再说loading。
上面分析了，Loading使用js动态生成的：外面遮罩层的长度宽度为页面可见长度可见宽度，里面内容保证居中。
我们结合上面禁止浏览器滚动的代码综合loading如下：
//获取浏览器页面可见高度和宽度
var _PageHeight = document.documentElement.clientHeight,
_PageWidth = document.documentElement.clientWidth;
//计算loading框内容距离外面遮罩层顶部和左部的距离（这里假设loading框内容的宽度为300px，高度为150px）
var _LoadingTop = _PageHeight>150?(_PageHeight-150)/2:0,
_LoadingLeft=_PageWidth>300?(_PageWidth-300)/2:0;
//在页面未加载完毕之前显示的loading Html自定义内容
var _LoadingHtml = '<div id="loadingDiv" style="position:fixed;left:0;width:100%;height:'+ _PageHeight +'px;top: 0;background: #fff;opacity:1;z-index:999;">'
+'<div id="loadingChild" style="position:absolute;left:' + _LoadingLeft + 'px;top:' +_LoadingTop+ 'px;color:#fff;width:300px;height:150px;">'
+'页面加载中....'+'</div></div>';
id="loadingDiv"的div就是那个遮罩层，他要占满整个可见区域;
id="loadingChild"的div就是你的具体loading效果的dom，里面内容可以自己定义。我这里就写了‘页面加载中...’。
//呈现loading效果--同时禁止浏览器滚动
document.write(_LoadingHtml);
var ModalHelperfun = ModalHelper('modal-open'); //这个就是上面禁止浏览器滚动的方法啦。这个'modal-open'就是bodyCls的具体类名啦。
ModalHelperfun.afterOpen(); //调用浮层出现的方法
//监听加载状态改变
document.onreadystatechange = completeLoading;
//加载状态为complete时移除loading效果
function completeLoading() {
if(document.readyState == "complete") {
var loadingMask = document.getElementById('loadingDiv');
loadingMask.parentNode.removeChild(loadingMask);
//取消浏览器被禁止滚动事件
ModalHelperfun.beforeClose(); //调用浮层关闭的方法
}
}
嘻嘻，讲完啦。
