加载图像但 onLoad/onError 未按预期工作答案

【问题标题】：loading an image but onLoad/onError not working as expected加载图像但 onLoad/onError 未按预期工作
【发布时间】：2014-04-20 20:14:49
【问题描述】：

我有一个 div

<div id='cards'>

我想根据一些逻辑填充图像。但仅当图像首次加载到内存中时。否则，通过onerror我想填写一些文字..

function pasteCard(card, to){
    if (typeof(card) == 'string')
        card = [card];
    var image = [];
    for (var i = 0; i < card.length; i++) {
        image[i] = new Image();
        image[i].src = '/sprites/open/' + card[i] + '.png';
        image[i].onload = function() {
            pasteImage(to, image[i]);
        }
        image[i].onerror = function() {            
            pasteText(to, card[i]);

        }
        // alert(card[i]) #1
    }

    function pasteImage(to, image) {
        to.append(image);
    }

    function pasteText(to, text) {
        // alert(card[i]) #2
        to.append(text);
    }    
}

pasteCard(['ABC123', 'DEF456', 'GHI789'], $('#cards'));

But this isn't working.

问题/怪异：If only #2 alert is active it returns nothing. 但奇怪的是if #1 alert is also active it does kinda work...（但仍然无法加载我的图像，并且在涉及其他代码时也大多失败）

问题：为什么没有 #1 警报（至少在那个 jsfiddle 中）就不能工作

建议？：我该怎么办？

【问题讨论】：

你的答案在this SO answer。

标签： javascript jquery image dom onerror

【解决方案1】：

Onload 和 onerror 事件在您的函数范围之外触发（执行），因此您的变量将是未定义的。在事件方法中，您可以访问图像对象this。您可以为每个图像设置数据属性并在错误事件中访问它。

这是一个例子： http://jsfiddle.net/7CfEu/4/

【讨论】：

已执行或随便你怎么称呼它，我刚刚更新了我的答案。

【解决方案2】：

回调与您的 image 数组不在同一范围内 - 因此您需要声明一个变量，然后将“连接范围”并在回调中使用它

i 变量也可能会改变，直到回调被触发 - 所以通过在回调中使用它你会得到未定义的行为

for (var i = 0; i < card.length; i++) {
        var current_card = card[i];
        var current_image = new Image();
        current_image.onload = function() {
            pasteImage(to, current_image);
        }
        current_image.onerror = function() {
            pasteText(to, current_card);
        }
        current_image.src = '/sprites/open/' + current_card + '.png';
        image[i] = current_image;
}

小提琴：http://jsfiddle.net/7CfEu/6/

（另外 - 关闭 div 标记绝不是一个坏主意）

【讨论】：

【解决方案3】：

以防万一有人因为和我一样的原因来到这里。

因为 onload 和 onerror 没有在我正在构建的页面中触发，所以快疯了。尝试复制粘贴

var myimage = new Image();
myimage.onload = function() { alert("Success"); };
myimage.onerror = function() { alert("Fail"); };
myimage.src = "mog.gif" //Doesn't exist.

在 codepen 和随机空白页面中工作。

原来我遇到的问题是我在页面前面执行了 AJAX 请求。这涉及授权，而授权又涉及调用

setRequestHeader();

这导致 net::ERR_FILE_NOT_FOUND 错误，而不是预期的 GET mog.gif 404（未找到）

这似乎阻止了事件的正确触发。

用

还原

xhr.setRequestHeader("Authorization", "");

【讨论】：