Das Laden von jQuery-Bildern zeigt den Ladeeffekt

Wir müssen die Bildladefunktion mehrmals verwenden. Nachdem wir im Internet nach Informationen gesucht haben, möchten wir sie für die zukünftige Verwendung neu anordnen. Das Ergebnis ist wie folgt:

Seite Zitat

<p class="container">
 <p class="row block" id="img-list">
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/1.jpg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/2.jpg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/3.jpg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/4.jpg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/5.jpg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/6.jpeg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/7.jpg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 <p class="col-md-3">
  <img  src="/Assets/OnePiece/8.jpg" class="img-thumbnail" alt="Das Laden von jQuery-Bildern zeigt den Ladeeffekt" >
 </p>
 </p>
</p>
<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>

Das Folgende ist das Plug-in-Skript. Um den Ladeeffekt hervorzuheben, wird eine Verzögerungszeit hinzugefügt.

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

Das Obige ist der Ladeeffekt für das Laden von jQuery-Bildern. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn).