jquery picture load display loading effect _jquery

In many cases we need to use the picture loading function, after searching the data on the Internet, we want to use it to rearrange the following, the results are as follows:

The last one is the load failed to display the picture, did not find the right picture, first with his replacement.

Page references

<div class= "Container" > <div class= "row block" id= "img-list" > <div class= "col-md-3" >  </div> <div class=" col-md-3 ">  </div> <div class=" col-md-3 ">  </div> <div class=" col-md-3 ">  </div> <div class=" col-md-3 ">  </div> <div class=" col-md-3 ">  </div> <div class=" col-md-3 ">  </div> <div class=" col-md-3 ">  </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>

The following is a plug-in script that adds a delay time to highlight the effect of the load.

;(function ($) {$.fn.extend {imgloading:function (options) {var defaults = {errorimg: "Http://www.oyly.net/Image S/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);

The script is to search the code from the Internet after the collation, is also the first time to write Plug-ins, if there is anything wrong, but also please advise!

This article has been sorted into the "jquery image loading Method Rollup", Welcome to learn to read.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.