Question

我有一个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 ...（但仍然没有加载我的图片，并且当涉及到其他代码时大部分都会失败）< / p>

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

建议？：我该怎么办？

Answer 1

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

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

Answer 2

回调与image数组不在同一范围内 - 因此你需要声明一个变量然后将＃34;连接范围＆＃34;并在回调中使用它

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标签绝不是一个坏主意）

Answer 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", "");

加载图像但onLoad / onError无法按预期工作

3 个答案: