我們常常會遇到img加載圖片的時候因為網絡問題或者圖片過大導致圖片加載失敗的問題，頁面就因為這張蹦掉的圖變得不美觀。所以我們需要圖片加載失敗的時候重新加載圖片

//js方法定義 function resetImgUrl(imgObj,imgSrc,maxErrorNum){ if(maxErrorNum > 0){ imgObj.onerror=function(){ reSetImgUrl(imgObj,imgSrc,maxErrorNum-1); }; setTimeout(function(){ imgObj.src=imgSrc; },500); }else{ imgObj.onerror=null; imgObj.src="<%=basePath%>images/noImg.png"; } } //調用 <img onerror='resetImgUrl(this,this.src,3)' src='"+srcStr+"'/> //該邏輯摘自網絡http://sunshuaij2ee.iteye.com/blog/1727993

判斷網絡連接情況,重新連接網絡時再請求圖片

var onLine = true var eventList = {} ;//用于儲存待重新執行函數的事件列表 window.addEventListener('offline',function(){onLine = false; }) window.addEventListener('online',function(){if(onLine == false){onLine = true; reLine();} }) //重新連接網絡的時候重新調用事件列表對象里面的函數 function reLine(){for(var key in eventList){if(!eventList[key])continuevar arg = eventList[key].arg;var thisOnFn = eventList[key].that;eventList[key].fun.apply(thisOnFn,arg);eventList[key] = null;} } //已經斷網了，把函數存儲到一個對象里面 function offlined(fun,arg,that){if(!onLine){//arg = arguments;var name = fun.name||'__new';eventList[name] = {};eventList[name].fun = fun;//原函數eventList[name].that = that;//原上下文對象eventList[name].arg = [].slice.call(arg);//原參數return true}return false }

測試一下（把代碼復制到chrome的console里面運行）

function aa(){offlined(aa,arguments,this)for(var i=0 ; i<arguments.length;i++){console.log(arguments[i]);} } //斷開網絡再執行一下代碼 aa(123,234,345) //先輸出一遍 123 234 345 //再連接上網絡后看輸出 123 234 345

結合上面的圖片重新加載邏輯

function resetImgUrl(imgObj,imgSrc,maxErrorNum){if(offlined(reSetImgUrl,arguments,this))returnif(maxErrorNum > 0){ imgObj.onerror=function(){ reSetImgUrl(imgObj,imgSrc,maxErrorNum-1); }; setTimeout(function(){ imgObj.src=imgSrc; },500); }else{ imgObj.onerror=null; imgObj.src="<%=basePath%>images/noImg.png"; } }

文章首發地址 https://juejin.im/user/5a30c3736fb9a044ff317351

涉及原創內容，轉載請附注明出處

總結

以上是生活随笔為你收集整理的js img图片加载失败，重新加载+断网检查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。