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

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

页面引用

div class=' container ' div class=' row block ' id=' img-list ' div class=' col-MD-3 ' img src=' http :/Assets/one piece/1。jpg ' class=' img-thumbnail '/div class=' col-MD-3 ' img src=' http :/Assets/one piece/2。jpg ' class=' img-thumbnail '/div class=' col-MD-3 ' img src=' http 333 ' ImgLoading({ error img : '/Scripts/ImgLoading/images/no image。' png '，load img : '/Scripts/ImgLoading/images/load。gif '，超时： 800 })；/script下面是插件脚本，为了突出加载的效果就加上了延迟时间。

；(函数($){ $。fn。extend({ imgloading :函数(选项){ var defaults={ error img : ' http://www。奥莉。网络/图像/默认/三重/旅程细节。png '，load img : ' http://www . 1。ytedu。cn/CNET/动态/演示/net _ 23/Images/loading。' gif '，Node: $(此处).find('img ')，超时： 1000 }；定义变量选项=$。扩展（默认值、选项);var浏览器=新对象();var plus={ browserverify : function(){ browser。用户代理=窗口。领航员。用户代理。tolowercase()；Browser.ie=/msie/.测试（浏览器。用户代理);浏览器Moz=/gecko/.测试（浏览器。用户代理);},每个Img:函数(){默认值节点。每个函数(1){ var img=defaults .节点。情商(一)；另外LoadEnd(浏览器，img.attr('imgurl ')，I，plus .LoadImg)；}) }，loadstate : function(){ 0默认值节点。每个函数(1){ var img=defaults .节点。情商(一)；var URL=img。attr(' src ')；img.attr('imgurl '，URL)；img.attr('src '，默认值。加载img)；}) }，LoadEnd:函数(浏览器，url，imgindex，回调){ var val=URLvar img=new Image()；if(浏览器。ie){ img。onreadystatechange=function(){ if(img。readystate==' complete ' | | img。ready state==' loaded '){ callback(img，imgindex)；} } } else if(浏览器moz){ img。onload=function(){ if(img。complete==true){ callback(img，imgindex)；} } } img。onerror=function(){ img。src=默认值。错误img } img。src=val}，LoadImg:函数(obj，imgindex){ setTimeout(function(){ defaults } .Node.eq(imgindex).attr('src '，obj。src)；},默认值。超时)；} } plus .LoadState()；另外. BrowserVerify()；另外每个img()；} });})(jQuery)；脚本是从网上搜索代码之后整理的，也是第一次写插件，如果有啥写的不对的，还请多多指教！

本文已被整理到了《jquery图片加载方法汇总》 ,欢迎大家学习阅读。

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