页面Loading js插件

当做Web移动端页面时，由于不同的手机设备联网速度不同，页面加载时最好做一个loading效果，增强用户体验，以下插件可以实现一个简单的loading效果：

/**
* 脚本名称：页面加载Loading脚本
* 脚本说明：
* 1.因为使用到document.body.scrollHeight对象，脚本引入时，脚本应放到body内，否则报错；
* 2.loadingImage为loading的图片，您可以替换为您想要的图片；loading弹窗的样式可以通过代码修改；
* 3.使用方法：弹出遮罩：whir.loading.add("加载中，请稍候", 1);扔掉遮罩： whir.loading.remove();
* 脚本作者：zhangqs008@163.com
*
*/
var whir = window.whir || {};
whir.loading =
{
add: function (title, opacity) {
opacity = opacity == undefined ? 0.4 : opacity;
var arr = this.getPageSize();
var width = parseInt(arr[2]);
var height = parseInt(arr[3]);

//var loadingImage = _basepath + "Admin/Scripts/jquery-easyui-1.4/themes/default/images/loading.gif";
var loadingImage = "http://img.lanrentuku.com/img/allimg/1212/5-121204193943.gif";

//背景遮罩
var mask = document.createElement("div");
mask.id = 'mask';
mask.style.position = 'fixed';
mask.style.left = '0';
mask.style.top = '0';
mask.style.width = '100%';
mask.style.height = parseInt(arr[1]) + "px";
mask.style.background = "#F2F2F2";
mask.style.filter = "alpha(opacity=" + opacity * 100 + ")";
mask.style.zIndex = "10000";
mask.addEventListener('touchstart', function (e) { e.preventDefault(); }, false); 	//触摸事件
mask.addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 	//滑动事件
mask.addEventListener('touchend', function (e) { e.preventDefault(); }, false); 		//离开元素事件
document.body.appendChild(mask);

//提示文本
var loading = document.createElement("div");
loading.id = 'loading';
loading.style.position = 'absolute';
loading.style.left = ((width / 2) - 75) + "px";
loading.style.top = (height / 2 - 70) + "px";
loading.style.width = '10em';
loading.style.height = "28px";
loading.style.lineHeight = "28px";
loading.style.display = "inline-block";
loading.style.padding = "0px 5px 0 30px";
loading.style.fontSize = " 0.5em";
loading.style.fontFamily = " initial";
loading.style.zIndex = "100001";
loading.style.background = "#fff url(" + loadingImage + ") no-repeat scroll 5px 5px";
loading.style.border = "1px solid #ccc";
loading.style.color = "#000";
title = (title != undefined && title.length > 0) ? title : "加载中，请稍候...";
loading.innerHTML = title;
document.body.appendChild(loading);
},
remove: function () {
var element = document.getElementById("mask");
element.parentNode.removeChild(element);
element = document.getElementById("loading");
element.parentNode.removeChild(element);
},
getPageSize: function () {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else {
if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
}
var windowWidth = 0;
var windowHeight = 0;
var pageHeight = 0;
var pageWidth = 0;

if (self.innerHeight) { // all except Explorer
if (document.documentElement.clientWidth) {
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else {
if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else {
if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
}
}
// for small pages with total height less then height of the viewport

if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if (xScroll < windowWidth) {
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
var arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
return arrayPageSize;
}
};
window.onload = function () {
whir.loading.remove();
};
whir.loading.add("", 1);

调用方式灰常简单：

弹出遮罩：whir.loading.add("加载中，请稍候", 1);

扔掉遮罩：whir.loading.remove();

将脚本放到body里，不用引用jquery，可以放心使用。