addEventListener to Image does not work in chrome

Question

This does not work in chrome, but works like a charm in firefox why is that? I have tried numerous combinations but noone of the events are fired in chrome.

I have debugged I thoroughly, and I does go through all of the code!

Im running Chrome Version 31.0.1650.63 m

for(var x = 0; x < 2; x++)
{
    while(bFinishCheck == false)
    {
        img = new Image();


        img.addEventListener("load", function() {
            // coming soon
            alert('inside load');
        }, false);
        img.addEventListener("error", function() {
            // coming soon
            alert('inside rror');
        }, false);
        if (bCheckEnabled) {

            img.src = 'Images/Cart/' + typeOfTiles[typeCounter] + '/' + tileCounter + '.png';

            console.log(img.src);
            tileCounter++;
        }   
    }
}   
return imgArray;

On my mobile so I can not test this. But since I have never seen new Image() inside JavaScript I am very surprised that this is a way to set event handlers for every element — surfmuggle, Jan 12 '14 at 23:34
Could you try if `img.onload = function() { ... }` works for you, just to be sure that it is not a problem with the `addEventListener` implementation in the browser? I'm on `31.0.1650.57` and there I have no problems with `addEventListener`. — t.niese, Jan 12 '14 at 23:39
You may be having problems with caching. See http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached#answer-3877079 for more help. — Sheng Slogar, Jan 12 '14 at 23:57

score 1 · Accepted Answer · answered Jan 14 '14 at 23:11

It did not work with anonymous function either but thanks for the comments, I ended up doing it like this. Using the complete property together with setInterval and Bind for the scope. This is to negate the cache firing events before they are hooked up. Complete handles that nicely!

DTE.prototype.LoadTileImages = function(typeOfTiles)
{    
    var img;
    var imgArray = new Array();
    var typeCounter = 0;

    for(var x = 0; x <= 13; x++)
    {       
        console.log("Fetching tile "+(x + 1 )+" of " + 14);
        img = new Image();
        img.src = 'Images/Cart/' + typeOfTiles[typeCounter]
                                 + '/' + (x + 1) + '.png';
        imgArray.push(img);
    }//end for loop!                        

   this.tiles = imgArray;
   setTimeout(this.InterValFunction.bind(this), 5); //Important does get called from   Global!

};

Calls this function.. See the bind to get the right scope!

DTE.prototype.InterValFunction = function () {

    that = this;
    this.loadedTiles = 1;


    for (var i = 0; i < this.tiles.length; i++) {

        if (!this.tiles[i].complete) {                      
            var percentage = i * 100.0 / (this.tiles.length);
            percentage = percentage.toFixed(0).toString() + ' %';
            console.log("loading... " + percentage);
            setTimeout(this.InterValFunction.bind(this), 20);
        }
        else
        {                   
            if(this.loadedTiles == this.tiles.length) {
                console.log("loading... " + 100 +"%");
                this.DrawControlPanelTiles(this.tiles, this);
            }

            this.loadedTiles++;                             
        }
    }//End for

    this.loadedTiles = 1;
};

score 0 · Answer 2 · answered Jan 12 '14 at 23:58

On many browsers (and off the bat I don't recall which ones), if the image is already cached then no load even is fired.

Try adding this line:

img.src = 'Images/Cart/' + typeOfTiles[typeCounter] + '/' + tileCounter + '.png';
if (img.complete) { alert("Image complete - Image loaded from cache"); }

addEventListener to Image does not work in chrome

2 Answers2