加載圖像，但onLoad / onError無法按預期工作

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

但這是行不通的。

問題/怪異 ： 如果僅#2警報處於活動狀態，則不返回任何內容。 但是奇怪的是， 如果#1警報也處於活動狀態，它確實可以工作 ...（但仍然無法加載我的圖像，並且在涉及其他代碼時也大多會失敗）

問題 ：為什么沒有#1警報就無法工作（至少在該jsfiddle中）

建議？ ： 我該怎么辦？

Answer 1

Onload和onerror事件在函數范圍之外被觸發（執行），因此您的變量將是未定義的。 在事件方法可以訪問this是圖像對象。 您可以為每個圖像設置數據屬性，並在發生錯誤事件時對其進行訪問。

這是一個示例： http : //jsfiddle.net/7CfEu/4/

Answer 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標簽絕不是一個壞主意）

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