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

最后一张是加载失败显示的图片，没找到合适的图片，先用他顶替。

页面引用

<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://plete == 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图片加载方法汇总》 ，欢迎大家学习阅读。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。