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

javascript image

2022-08-30 04:36:10

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

对于 Web 应用，我正在分析 xml 文件，并从图像路径列表动态创建 HTML 图像。某些图像路径可能不再存在于服务器上，因此我想通过检测哪些图像无法加载并删除该HTML img元素来优雅地失败。

注意 jQuery 解决方案将无法使用（老板不想使用 jQuery，是的，我知道不要让我开始）。我知道jQuery中有一种方法可以检测何时加载图像，但不知道它是否失败。

我的代码用于创建 img 元素，但我如何检测 img 路径是否导致图像加载失败？

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

答案 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的老板表示同情！

答案 2

答案很好，但它引入了一个问题。每当您分配或直接分配时，它都可能替换之前分配的回调。这就是为什么有一个很好的方法，“在事件目标上注册指定的侦听器，它被调用”，就像他们在MDN上所说的那样。您可以在同一事件上注册任意数量的侦听器。onloadonerror

让我稍微重写一下答案。

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');
    }

);