jQuery图片加载显示loading效果

<div class="container"> <div class="row block" id="img-list"> <div class="col-md-3">  <img src="/Assets/OnePiece/1.jpg" class="img-thumbnail"> </div> <div class="col-md-3">  <img src="/Assets/OnePiece/2.jpg" class="img-thumbnail"> </div> <div class="col-md-3">  <img src="/Assets/OnePiece/3.jpg" class="img-thumbnail"> </div> <div class="col-md-3">  <img src="/Assets/OnePiece/4.jpg" class="img-thumbnail"> </div> <div class="col-md-3">  <img src="/Assets/OnePiece/5.jpg" class="img-thumbnail"> </div> <div class="col-md-3">  <img src="/Assets/OnePiece/6.jpeg" class="img-thumbnail"> </div> <div class="col-md-3">  <img src="/Assets/OnePiece/7.jpg" class="img-thumbnail"> </div> <div class="col-md-3">  <img src="/Assets/OnePiece/8.jpg" class="img-thumbnail"> </div> </div></div><script src="~/Scripts/ImgLoading/ImgLoading.js"></script><script> $("#img-list").ImgLoading({ errorimg: "/Scripts/ImgLoading/images/noimage.png", loadimg: "/Scripts/ImgLoading/images/load.gif", timeout: 800 });</script>

;(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);