快捷導(dǎo)航

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

更新時(shí)間：2020年11月30日 17:19:39 作者：天梯夢(mèng)

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

運(yùn)營(yíng)網(wǎng)站久了之后，無(wú)法避免會(huì)出現(xiàn)圖片404的情況，原因可能是圖片文件本來(lái)就不存在或目前不存在。常見的解決方案是將404圖片隱藏或者是替換為默認(rèn)的圖片。

img標(biāo)簽事件屬性

img標(biāo)簽可使用的時(shí)間屬性有：

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標(biāo)簽常用的事件如下：

onerror：圖像加載過(guò)程中發(fā)生錯(cuò)誤時(shí)被觸發(fā)。
onabort：圖片加載的時(shí)候，用戶通過(guò)點(diǎn)擊停止加載時(shí)觸發(fā)，通常在這里觸發(fā)一個(gè)提示：“圖片正在加載”。
onload：當(dāng)圖片加載完成之后觸發(fā)。

1. 對(duì)圖片監(jiān)聽onerror事件

<img src="someimage.png" onerror="imgError(this);" /> 
 
// 原生JS: 
function imgError(image){ 
 // 隱藏圖片 
 image.style.display = 'none'; 
 // 替換為默認(rèn)圖片 
 // document.getElementById("img").setAttribute("src", "images/demo.png"); 
} 
 
// 使用jQuery處理: 
function imgError(image){ 
 $(image).hide(); 
 // $(this).attr("src", "images/demo.png"); 
}

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

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

// 通常不會(huì)再HTML里面內(nèi)聯(lián)js，可以使用.error對(duì)圖片進(jìn)行監(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!'); }, 
}); 
 
// 驗(yàn)證資源是否下載 
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針對(duì)圖片加載時(shí)出現(xiàn)404問(wèn)題的解決辦法，希望大家有所收獲。

您可能感興趣的文章: