問題：我有一個網(wǎng)頁，可以從外部源加載大量圖像。其中一些圖像鏈接可能會被破壞，我有一個腳本，onerror如果未加載，則通過刪除圖像的屬性調(diào)用該腳本（以及一些相關(guān)內(nèi)容，如標(biāo)題、一些標(biāo)簽...）。在大多數(shù)情況下，這都可以正常工作，除非圖像服務(wù)器向我發(fā)送默認(rèn)圖像來替換丟失的圖像。在這種情況下，onerror事件不會觸發(fā)，我的頁面會得到一個丑陋的默認(rèn)圖像。我想做的事：我希望能夠檢測并消除這些圖像。問題：1）有沒有辦法檢測從img標(biāo)簽加載圖像的狀態(tài)代碼（404）？（根據(jù)我所做的研究，這似乎不可能，但我仍在問......）。2）如果#1 不可能，一種解決方案似乎是調(diào)用類似的方法來加載圖像XMLHttpRequest并查看響應(yīng)代碼。在這種情況下：有沒有更合適的方法呢XMLHttpRequest？我應(yīng)該預(yù)料到 CORS 會帶來很多問題嗎？作為參考，這里是基于以下的解決方案草案XMLHttpRequest：function imgLoad(url, onOk, onProblem) { 'use strict'; var request = new XMLHttpRequest(); request.open('GET', url); request.responseType = 'blob'; request.onload = function () { if (request.status === 200) { onOk(request.response); } else { onProblem(); } }; request.onerror = function () { // if the request fails onProblem(); }; request.send();};function onOk(response) { var body = document.querySelector('body'); var myImage = new Image(); myImage.crossOrigin = ""; // or "anonymous" var imageURL = window.URL.createObjectURL(response); myImage.src = imageURL; body.appendChild(myImage);};function onProblem(err) { // remove the image and the other related elements};function loadImage(url) { 'use strict'; imgLoad(url, onOk, onProblem);};編輯：回答@Oo，實(shí)際代碼如下：<img src="http://someimageurl.jpg" onerror="imgError(this);">只是一個簡單的 img 標(biāo)簽。該imgError功能是在圖像未加載時刪除與圖像相關(guān)的元素的功能。但如果返回默認(rèn)圖像，則僅當(dāng)不返回圖像時才起作用。
1 回答
慕姐4208626
TA貢獻(xiàn)1852條經(jīng)驗(yàn) 獲得超7個贊
這是我實(shí)施的實(shí)際解決方案。同時我為圖像添加了延遲加載。這是代碼，以防它對任何人有幫助：
/**
* this function load the image using an XMLHttpRequest to be able to read the status code from javascript.
*/
function imgLoad(image, onOk, onError) {
var url = image.dataset.src;
var request = new XMLHttpRequest();
request.open('GET', url);
request.responseType = 'blob';
request.onload = function () {
if (request.status === 200) {
onOk(request.response, image);
} else {
onError(image);
}
};
request.onerror = function () {
// if the request fails
onError(image);
};
request.send();
};
/**
* This function is called if the image successfully loads. It just replace the "src" prop and the image is pulled from the cache from the browser.
*/
function onOk(response, image) {
image.crossOrigin = ""; // or "anonymous"
var imageURL = window.URL.createObjectURL(response);
//image.src = imageURL; // to use the blob response
image.src = image.dataset.src; // to use normal src and disk cache
image.onerror = "";
image.classList.remove("lazy");
};
/**
* small helper
*/
function loadImage(image) {
imgLoad(image, onOk, imgError);
};
/**
* wrap up and lazy loading implementation
*/
document.addEventListener("DOMContentLoaded", function() {
var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
if ("IntersectionObserver" in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
loadImage(lazyImage);
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// fall back
lazyImages.forEach(function(lazyImage) {
loadImage(lazyImage);
});
}
});
我沒有包含“onError”函數(shù)，因?yàn)樗鼘τ谖业拇a來說非常具體，并且在這里不是非常相關(guān)。
- 1 回答
- 0 關(guān)注
- 140 瀏覽
添加回答
舉報
0/150
提交
取消