Question

Possible Duplicate:
jQuery or JavaScript: Determine when image finished loading

The problem is known, but I can’t find any simple solution:

var img = new Image();

img.onLoad = function() {
  console.log("load");         // this event doesn't fire
};

img.src = "img/domino/21.png";

console.log(img.complete);     // false

setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

I was looking for an implementation of onComplete event, but I can’t find anything. Would you help?

Answer 1

The proper spelling of the event handler property is all lowercase .onload, not .onLoad.

var img = new Image();

img.onload = function() {
  console.log("load");         // works every time
};

img.src = "img/domino/21.png";

Javascript is case sensitive so you MUST use the proper case for all object properties.

---

The alternatives besides .onload are to use:

img.addEventListener("load", function(e) {...}); 

or (in older versions of IE):

img.attachEvent("onload", function(e) {...});

If you’re only using one event handler and you aren’t using a cross platform library that already abstracts event handlers for you, then using .onload is the simplest.

And, here’s a simple cross browser way to add event handlers:

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}