php loading效果,jQuery图片加载显示loading效果

在很多时候我们需要用到图片加载功能，在网上搜资料后就想为了以后使用方便重新整理了下，结果如图：

页面引用

$("#img-list").ImgLoading({

errorimg: "/Scripts/ImgLoading/images/noimage.png",

loadimg: "/Scripts/ImgLoading/images/load.gif",

timeout: 800

});

下面是插件脚本，为了突出加载的效果就加上了延迟时间。;(function ($) {

$.fn.extend({

ImgLoading: function (options) {

var defaults = {

errorimg: "http://www.oyly.net/Images/default/Journey/journeydetail.png",

loadimg: "http://www1.ytedu.cn/cnet/dynamic/presentation/net_23/images/loading.gif",

Node: $(this).find("img"),

timeout: 1000

};

var options = $.extend(defaults, options);

var Browser = new Object();

var plus = {

BrowserVerify:function(){

Browser.userAgent = window.navigator.userAgent.toLowerCase();

Browser.ie = /msie/.test(Browser.userAgent);

Browser.Moz = /gecko/.test(Browser.userAgent);

},

EachImg: function () {

defaults.Node.each(function (i) {

var img = defaults.Node.eq(i);

plus.LoadEnd(Browser, img.attr("imgurl"), i, plus.LoadImg);

})

},

LoadState:function(){

defaults.Node.each(function (i) {

var img = defaults.Node.eq(i);

var url = img.attr("src");

img.attr("imgurl", url);

img.attr("src",defaults.loadimg);

})

},

LoadEnd: function (Browser, url, imgindex, callback) {

var val = url;

var img = new Image();

if (Browser.ie) {

img.onreadystatechange = function () {

if (img.readyState == "complete" || img.readyState == "loaded") {

callback(img, imgindex);

}

}

} else if (Browser.Moz) {

img.onload = function () {

if (img.complete == true) {

callback(img, imgindex);

}

}

}

img.onerror = function () { img.src = defaults.errorimg }

img.src = val;

},

LoadImg: function (obj, imgindex) {

setTimeout(function () {

defaults.Node.eq(imgindex).attr("src", obj.src);

}, defaults.timeout);

}

}

plus.LoadState();

plus.BrowserVerify();

plus.EachImg();

}

});

})(jQuery);

以上就是jQuery图片加载显示loading效果的内容，更多相关内容请关注PHP中文网(www.php.cn)！

本文原创发布php中文网，转载请注明出处，感谢您的尊重！