Question

我正在尝试加载和映像，如果网址无效，请输入错误图片。在我的情况下，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

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

要解决此问题，请更新onload回调：

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

（与错误回调相同）。

总的来说，我不认为这是一种干净的方式。我只是创建多个Image对象以避免混淆（并可能使用页面预加载微调器）。分配Image的开销很小，而且几乎不重要。

带有image.onload和image.onerror的无限循环

1 个答案: