當圖像無法以Javascript加載時檢測

Question

有沒有一種方法可以確定圖像路徑是否導致實際圖像，也就是說，檢測圖像何時無法在Javascript中加載。

對於Web應用程序，我解析XML文件並從圖像路徑列表動態創建HTML圖像。某些圖像路徑可能不再存在於服務器上，因此我想通過檢測哪些圖像無法加載並刪除該HTML img元素來優雅地失敗。

注意JQuery解決方案將無法使用（老闆不想使用JQuery，是的，我知道不讓我開始）。我知道在JQuery中檢測圖片何時加載的方法，但不知道它是否失敗。

我的代碼來創建img元素，但我如何檢測img路徑導致加載失敗的圖像？

var imgObj = new Image(); // document.createElement("img"); 
imgObj.src = src; 

Answer 1

你可以試試下面的代碼。雖然我不能保證瀏覽器的兼容性，所以你必須測試它。

function testImage(URL) { 
    var tester=new Image(); 
    tester.onload=imageFound; 
    tester.onerror=imageNotFound; 
    tester.src=URL; 
} 

function imageFound() { 
    alert('That image is found and loaded'); 
} 

function imageNotFound() { 
    alert('That image was not found.'); 
} 

testImage("http://foo.com/bar.jpg"); 

而我對jQuery耐心老闆的同情！

Answer 2

這是我寫了另一個答案的功能：Javascript Image Url Verify。我不知道它是否正是您所需要的，但它使用了您將使用的各種技術，其中包括onload，onerror，onabort的處理程序和一般超時。

由於圖像加載是異步的，因此您可以使用圖像調用此函數，稍後再調用結果的回調函數。

Answer 3

就像如下：

var img = new Image(); 
img.src = imgUrl; 

if (!img.complete) { 

//has picture 
} 
else //not{ 

} 

Answer 4

答案是好的，但它引入了一個問題。只要您直接指定onload或onerror，它可能會替換先前分配的回調。這就是爲什麼有一個很好的方法，「將指定的偵聽器註冊到它在MDN上說的」上調用的EventTarget「上。您可以在同一個事件中根據需要註冊許多聽衆。

讓我稍微改寫一下答案。

function testImage(url) { 
    var tester = new Image(); 
    tester.addEventListener('load', imageFound); 
    tester.addEventListener('error', imageNotFound); 
    tester.src = url; 
} 

function imageFound() { 
    alert('That image is found and loaded'); 
} 

function imageNotFound() { 
    alert('That image was not found.'); 
} 

testImage("http://foo.com/bar.jpg"); 

因爲外部資源加載過程是異步的，它會更好使用與承諾，如下面的JavaScript現代化。

function testImage(url) { 

    // Define the promise 
    const imgPromise = new Promise(function imgPromise(resolve, reject) { 

     // Create the image 
     const imgElement = new Image(); 

     // When image is loaded, resolve the promise 
     imgElement.addEventListener('load', function imgOnLoad() { 
      resolve(this); 
     }); 

     // When there's an error during load, reject the promise 
     imgElement.addEventListener('error', function imgOnError() { 
      reject(); 
     }) 

     // Assign URL 
     imgElement.src = url; 

    }); 

    return imgPromise; 
} 

testImage("http://foo.com/bar.jpg").then(

    function fulfilled(img) { 
     console.log('That image is found and loaded', img); 
    }, 

    function rejected() { 
     console.log('That image was not found'); 
    } 

); 

Answer 5

/** 
* Tests image load. 
* @param {String} url 
* @returns {Promise} 
*/ 
function testImageUrl(url) { 
    return new Promise(function(resolve, reject) { 
    var image = new Image(); 
    image.addEventListener('load', resolve); 
    image.addEventListener('error', reject); 
    image.src = url; 
    }); 
} 

return testImageUrl(imageUrl).then(function imageLoaded(e) { 
    return imageUrl; 
}) 
.catch(function imageFailed(e) { 
    return defaultImageUrl; 
}); 

Answer 6

此：

<img onerror="this.src='/images/image.png'" src="...">