Loading an image but onload/onerror not working as expected

Question

I have a div

<div id='cards'>

Which I want to fill with images based on some logic. But only when images are first loaded into memory. Otherwise, through onerror I wanna fill in some text..

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.

Problem/weirdness: If only #2 alert is active it returns nothing. But strangely if #1 alert is also active it does kinda work... (but still doesn't load my images, and mostly fails too when other code is involved)

Question: Why is it not working without #1 alert (at least in that jsfiddle)

suggestions?: what should I do?

Your answer is in [this SO answer](http://stackoverflow.com/a/1451043/1169519). — Teemu, Apr 20 '14 at 20:33

NoGray · Accepted Answer · 2014-04-20T20:37:56.700

2

Onload and onerror events are fired (executed) outside the scope of your function so your variables will be undefined. In the event method you have access to this which is the image object. You can set a data attribute to each image and access that in your error event.

Here is an example: http://jsfiddle.net/7CfEu/4/

edited Apr 20 '14 at 20:37

answered Apr 20 '14 at 20:31

NoGray

1,149
7
9

executed or whatever you want to call it, I just updated my answer. – NoGray Apr 20 '14 at 20:38

Yaron U. · Answer 2 · 2014-04-20T20:47:52.727

The callbacks are not in the same scope as your image array is - therefor you need to declare a variable then will "connect the scopes" and use it inside the callbacks

also the i variable probably changes until the callback is fired - so by using it inside the callback you will get undefined behavior

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;
}

Fiddle: http://jsfiddle.net/7CfEu/6/

(Also - closing the div tag is never a bad idea)

Volv · Answer 3 · 2015-12-01T15:29:34.637

Just in case anyone ends up here for same reason I did.

Was going crazy because onload and onerror were not firing in the page I was building. Tried copy pasting

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

Which was working within codepen and random otherwise blank pages.

Turns out the problem I was having was that I was doing AJAX requests earlier in the page. This involved authorization which in turn involved a call to

setRequestHeader();

This was resulting in a net::ERR_FILE_NOT_FOUND error instead of the expected GET mog.gif 404 (Not Found)

This seemed to prevent proper triggering of events.

Revert with

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

Loading an image but onload/onerror not working as expected

3 Answers3