84 lines
3.3 KiB
JavaScript
Executable File
84 lines
3.3 KiB
JavaScript
Executable File
/*******************************************
|
||
*
|
||
* Plug-in:友好的页面加载效果
|
||
* Author:sqinyang (sqinyang@sina.com)
|
||
* Time:2015/04/20
|
||
* Explanation:随着HTML5的流行，页面效果越来越炫，同时也需要加载大量的插件及素材，万恶的网速，特别对于挂在国外服务器的网站，一打开一堆素材缓缓加载，位置错乱不齐，故编写此方法，方便大家使用
|
||
*
|
||
*********************************************/
|
||
|
||
jQuery.MyCommon = {
|
||
PageLoading: function (options) {
|
||
var defaults = {
|
||
opacity: 1,
|
||
//loading页面透明度
|
||
backgroundColor: "#fff",
|
||
//loading页面背景色
|
||
borderColor: "#bbb",
|
||
//提示边框颜色
|
||
borderWidth: 1,
|
||
//提示边框宽度
|
||
borderStyle: "solid",
|
||
//提示边框样式
|
||
loadingTips: "正在加载, 请稍后...",
|
||
//提示文本
|
||
TipsColor: "#666",
|
||
//提示颜色
|
||
delayTime: 1000,
|
||
//页面加载完成后，加载页面渐出速度
|
||
zindex: 999,
|
||
//loading页面层次
|
||
sleep: 0
|
||
//设置挂起,等于0时则无需挂起
|
||
|
||
}
|
||
var options = $.extend(defaults, options);
|
||
|
||
//获取页面宽高
|
||
var _PageHeight = document.documentElement.clientHeight,
|
||
_PageWidth = document.documentElement.clientWidth;
|
||
|
||
//在页面未加载完毕之前显示的loading Html自定义内容
|
||
var _LoadingHtml = '<div id="loadingPage" style="position:fixed;left:0;top:0;_position: absolute;width:100%;height:' + _PageHeight + 'px;background:' + options.backgroundColor + ';opacity:' + options.opacity + ';filter:alpha(opacity=' + options.opacity * 100 + ');z-index:' + options.zindex + ';"><div id="loadingTips" style="position: absolute; cursor1: wait; width: auto;border-color:' + options.borderColor + ';border-style:' + options.borderStyle + ';border-width:' + options.borderWidth + 'px; height:80px; line-height:80px; padding-left:80px; padding-right: 5px;border-radius:10px; background: ' + options.backgroundColor + ' url(http://www.jq22.com/demo/jquery-loading-150421215832/images/loading.gif) no-repeat 5px center; color:' + options.TipsColor + ';font-size:20px;">' + options.loadingTips + '</div></div>';
|
||
|
||
//呈现loading效果
|
||
$("body").append(_LoadingHtml);
|
||
|
||
//获取loading提示框宽高
|
||
var _LoadingTipsH = document.getElementById("loadingTips").clientHeight,
|
||
_LoadingTipsW = document.getElementById("loadingTips").clientWidth;
|
||
|
||
//计算距离，让loading提示框保持在屏幕上下左右居中
|
||
var _LoadingTop = _PageHeight > _LoadingTipsH ? (_PageHeight - _LoadingTipsH) / 2 : 0,
|
||
_LoadingLeft = _PageWidth > _LoadingTipsW ? (_PageWidth - _LoadingTipsW) / 2 : 0;
|
||
|
||
$("#loadingTips").css({
|
||
"left": _LoadingLeft + "px",
|
||
"top": _LoadingTop + "px"
|
||
});
|
||
|
||
//监听页面加载状态
|
||
document.onreadystatechange = PageLoaded;
|
||
|
||
//当页面加载完成后执行
|
||
function PageLoaded() {
|
||
if (document.readyState == "complete") {
|
||
var loadingMask = $('#loadingPage');
|
||
|
||
setTimeout(function () {
|
||
loadingMask.animate({
|
||
"opacity": 0
|
||
},
|
||
options.delayTime,
|
||
function () {
|
||
$(this).hide();
|
||
|
||
});
|
||
|
||
},
|
||
options.sleep);
|
||
|
||
}
|
||
}
|
||
}
|
||
} |