運營網站久了之后，無法避免會出現圖片404的情況，原因可能是圖片文件本來就不存在或目前不存在。常見的解決方案是將404圖片隱藏或者是替換為默認的圖片。
img標簽事件屬性
img標簽可使用的時間屬性有：
onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload
img標簽常用的事件如下：
onerror：圖像加載過程中發生錯誤時被觸發。
onabort：圖片加載的時候，用戶通過點擊停止加載時觸發，通常在這里觸發一個提示：“圖片正在加載”。
onload：當圖片加載完成之后觸發。
1. 對圖片監聽onerror事件
<img src="someimage.png" onerror="imgError(this);" /> // 原生JS: function imgError(image){ // 隱藏圖片 image.style.display = 'none'; // 替換為默認圖片 // document.getElementById("img").setAttribute("src", "images/demo.png"); } // 使用jQuery處理: function imgError(image){ $(image).hide(); // $(this).attr("src", "images/demo.png"); } 注意：需要將處理函數定義在head，防止圖片加載出錯時沒有讀取到處理函數
2. 使用jQuery監聽error
// 通常不會再HTML里面內聯js，可以使用.error對圖片進行監聽處理 $('#test img').error(function() { $(this).hide(); // $(this).attr("src", "images/demo.png"); }); 注意：jQuery加載需要在img前，處理函數需在img后
3. 使用函數處理
// 原生JS解決方案 function $id(id) { return !id || id.nodeType === 1 ? id : document.getElementById(id); } function isType(o, t) { return (typeof o).indexOf(t.charAt(0).toLowerCase()) === 0; } // 主要邏輯 function image(src, cfg) { var img, prop, target; cfg = cfg || (isType(src, 'o') ? src : {}); img = $id(src); if (img) { src = cfg.src || img.src; } else { img = document.createElement('img'); src = src || cfg.src; } if (!src) { return null; } prop = isType(img.naturalWidth,'u') ? 'width' : 'naturalWidth'; img.alt = cfg.alt || img.alt; // Add the image and insert if requested (must be on DOM to load or // pull from cache) img.src = src; target = $id(cfg.target); if (target) { target.insertBefore(img, $id(cfg.insertBefore) || null); } // Loaded? if (img.complete) { if (img[prop]) { if (isType(cfg.success,'f')) { cfg.success.call(img); } } else { if (isType(cfg.failure,'f')) { cfg.failure.call(img); } } } else { if (isType(cfg.success,'f')) { img.onload = cfg.success; } if (isType(cfg.failure,'f')) { img.onerror = cfg.failure; } } return img; } 以上函數有許多用處：
1. 獲取圖片信息：圖片是否可下載，圖片寬高
image('img',{ success : function () { alert(this.width + "-" + this.height); }, failure : function () { alert('image 404!'); }, }); // 驗證資源是否下載 image('images/banner/banner_2.jpg', { success : function () {console.log('sucess')}, failure : function () {console.log('failure')}, target : 'myContainerId', insertBefore : 'someChildOfmyContainerId' }); 2. 下載并插入圖片
var report = $id('report'), callback = { success : function () { report.innerHTML += '<p>Success - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; }, failure : function () { report.innerHTML += '<p>Failure - ' + this.src + ' ('+this.offsetWidth+'x'+this.offsetHeight+')</p>'; }, target : 'target' }; image('img', callback); image('images/banner/banner_2.jpg', callback); 以上就是js針對圖片加載時出現404問題的解決辦法，希望大家有所收獲。
新聞熱點
疑難解答
