javascript - image.onload 和 image.onerror 无限循环

Question

我正在尝试加载和图像，如果 url 无效，请改为放置错误图像。在我的例子中，onerror 事件似乎被无限调用:

html:

<div id="output"></div>

JavaScript:

function createImage(imageId) {
    var spinnerUrl = 'http://placehold.it/600&text=spinner';
    var errorUrl = 'http://placehold.it/600&text=error';
    var successUrl = 'http://placehold.com/600&text=success';
    var img = new Image();
    img.onerror = function() {
        console.log('no image at url: ' + imageId);
        this.src = errorUrl;
    };
    img.onload = function() {
        this.src = successUrl;
    };
    img.src = spinnerUrl;   
    return img;
};

function loadImage(id) {
    document.getElementById(id).appendChild(createImage('image-id'));
};

loadImage('output');

您会注意到日志显示“在 url: image-id 处没有图像”

Answer 1

问题是您在 onload 回调中反复重新分配 successUrl，导致无限递归，因为它被一遍又一遍地调用。

要解决，请更新 onload 回调:

img.onload = function() {
    this.onload = function() {
       // Whatever you want to do now.
    };
    this.src = successUrl;
};

(错误回调同理)

总的来说，我认为这不是一种干净的方式。我会简单地创建多个 Image 对象以避免混淆(并且可能会使用页面预加载微调器)。分配 Image 的开销很小，几乎无关紧要。