自己写的一个小插件，还有很多需要完善。。。
(function ($) {
$.fn.StartLoading = function (option) {
var defaultVal = {
loadgif: ‘image/loading.gif‘,
backcolor: ‘white‘,
picheight: 50,
picwidth: 50,
fullshowpic: false,//图片是否设置透明度
opacity: 0.5,
timeout: 3000
}
var result = $.extend({}, defaultVal, option);
var $obj = $(this);//选择器的Jquery对象
var iswndordoc = false;
if ($(this).get(0) == document || $(this).get(0) == window || $(this).get(0) == document.body) {
iswndordoc = true;
$obj = $(document.body);
}
//获取对象属性
var constClone = {
constwidth: $obj.width(),
constheight: $obj.height(),
constleft: iswndordoc == true ? 0 : $obj.offset().left,
consttop: iswndordoc == true ? 0 : $obj.offset().top
}
if (iswndordoc) {
var $clonebottom = $("<div></div>");
} else {
if ($(this)[0].tagName != "div") {
var $objTemp = $("<div id=\"_temp_div\" style=\"width:" + constClone.constwidth + "; height:" + constClone.constheight + "; left:" + constClone.constleft + "; top:" + constClone.consttop + "\"></div>");
$($obj.parent().get(0)).append($objTemp);
$obj = $objTemp;
}
//生成最底层DIV
var $clonebottom = $obj.clone().removeAttr("id").removeAttr("class").removeAttr("name");
}
//设置最底层DIV属性
$clonebottom.removeClass().removeAttr("style").empty().css({
"position": "absolute",
"left": constClone.constleft,
"top": constClone.consttop,
"z_index": "10000",
"width": constClone.constwidth,
"height": constClone.constheight,
"background-color": "transparent"
});
var $cloneTop = $clonebottom.clone().css({ "z_index": "9999", "background-color": "" + result.backcolor + "", "position": "" });
$clonebottom.append($cloneTop);
$clonebottom.append("<img id=\"_loading_plugin\" src=\"" + result.loadgif + "\" style=\"position:absolute;z_index: 9999\"/>");
if (iswndordoc) {
$obj.append($clonebottom);
} else {
$($obj.parent().get(0)).append($clonebottom);
}
var $imgloading = $("#_loading_plugin");
$imgloading.css({ "width": "" + result.picwidth + "px", "height": "" + result.picheight + "px" });
$imgloading.css({ "left": (constClone.constwidth - $imgloading.width()) / 2, "top": (constClone.constheight - $imgloading.height()) / 2 });
if (result.fullshowpic)
$clonebottom.css("opacity", "" + result.opacity + "");
else
$cloneTop.css("opacity", "" + result.opacity + "");
var hand = setTimeout(function () {
$clonebottom.fadeOut("slow", function () {
$(this).remove();
clearTimeout(hand);
});
}, result.timeout)
return $clonebottom;
}
$.fn.StopLoading = function () {
var $globalthis = $(this);
$globalthis.remove()
}
})(jQuery)
用法： 开始显示 var $load = $(window).StartLoading({ timeout: 1000000, fullshowpic: true }); 结束显示： $load.StopLoading();