解決js圖片加載時出現(xiàn)404的問題

更新時間：2020年11月30日 17:19:39 作者：天梯夢

這篇文章主要為大家詳細介紹了解決js圖片加載時出現(xiàn)404問題的方法，具有一定的參考價值，這方面有困惑的朋友可以參考一下

運營網(wǎng)站久了之后，無法避免會出現(xiàn)圖片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：圖像加載過程中發(fā)生錯誤時被觸發(fā)。
onabort：圖片加載的時候，用戶通過點擊停止加載時觸發(fā)，通常在這里觸發(fā)一個提示：“圖片正在加載”。
onload：當圖片加載完成之后觸發(fā)。

1. 對圖片監(jiān)聽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"); 
}

注意：需要將處理函數(shù)定義在head，防止圖片加載出錯時沒有讀取到處理函數(shù)

2. 使用jQuery監(jiān)聽error

// 通常不會再HTML里面內聯(lián)js，可以使用.error對圖片進行監(jiān)聽處理 
$('#test img').error(function() { 
 $(this).hide(); 
 // $(this).attr("src", "images/demo.png"); 
});

注意：jQuery加載需要在img前，處理函數(shù)需在img后

3. 使用函數(shù)處理

// 原生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; 
}

以上函數(shù)有許多用處：

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針對圖片加載時出現(xiàn)404問題的解決辦法，希望大家有所收獲。

您可能感興趣的文章: