javascript - 检测图像何时无法在 JavaScript 中加载

Question

有没有办法确定图像路径是否指向实际图像，即检测图像何时无法在 JavaScript 中加载。

对于网络应用程序，我正在解析一个 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 的老板表示同情!