Looking for an alternative to the image onLoad

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?

Try [this question](http://stackoverflow.com/questions/4494437/jquery-or-javascript-determine-when-image-finished-loading) — Pavel Strakhov, May 11 '12 at 00:15
`onload`, not `onLoad`; JavaScript is case-sensitive, even if HTML isn't. — Phrogz, May 11 '12 at 00:19
@Phrogz - DAMN IT :D:D:D. I lost an hour because of one letter. — ciembor, May 11 '12 at 00:26

jfriend00 · Accepted Answer · 2012-05-11T00:44:03.383

7

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

edited May 11 '12 at 00:44

answered May 11 '12 at 00:20

jfriend00

683,504
96
985
979

Note: the question is `Looking for an alternative to the image onLoad`, not `why onLoad is not working`. – Derek 朕會功夫 May 11 '12 at 00:24
1

Yes, but I was looking for an alternative, because it wasn't working. Of course thanks for all answers, but this ones solves my problem:). – ciembor May 11 '12 at 00:31
1

@ciembor - OK, I added a couple alternatives. – jfriend00 May 11 '12 at 00:44
Also today I found that webkit needs `img.src = ''` before assigning new src if it was used before. – quux May 24 '14 at 10:52
your onload doesnt go off probably since the image is in the browser cache. – Nils Thiebosch Dec 20 '19 at 12:14
@HolgerThiebosch - onload still fires when the image comes from browser cache. – jfriend00 Dec 20 '19 at 16:59

score 5 · Answer 2 · answered May 11 '12 at 00:16

var img = new Image();
img.onload = function() {
    console.log("load");
};
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

In Chrome,Firefox and Safari

var img = new Image();
img.addEventListener('load',function() {
    console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

Or in IE or Opera

var img = new Image();
img.attachEvent('onload',function() {
    console.log("load");
});
img.src = "img/domino/21.png";
console.log(img.complete);     // false
setTimeout(function() {
  console.log(img.complete);   // sometimes true, sometimes false
}, 10);

score 1 · Answer 3 · answered May 11 '12 at 00:15

Are you sure your image at img/domino/21.png exists? The following code works for me in Firebug's console.

var img = new Image();

var onload = function() {
    console.log('load');
}

img.onload = onload;

img.src = "http://img.gawkerassets.com/img/17m7otdiw6n8fjpg/original.jpg?" + (new Date()).getMilliseconds();

gdoron · Answer 4 · 2012-05-11T00:21:50.273

1

If you can use jQuery it can be simple:

$('img').load(foo).error(foo);

Or with vanilla javascript:

img.onload = img.onerror = foo;

edited May 11 '12 at 00:21

answered May 11 '12 at 00:16

gdoron

147,333
58
291
367

2

you angered the prototype / mootools fanboys when you mentioned jQuery – Michael Robinson May 11 '12 at 00:20
I'm guessing the `onLoad` vs. `onload` (but I didn't do it). – Phrogz May 11 '12 at 00:20
@Derek. Then don't use it. Did I wrote it's the only way? – gdoron May 11 '12 at 00:22
1

I didn't disagree your answer. I am not the one who downvoted you. – Derek 朕會功夫 May 11 '12 at 00:23

score 0 · Answer 5 · answered May 11 '12 at 00:21

0

var img = new Image();

//blah blah...

img.addEventListener("load",function() {
    console.log("Loaded!");
});

answered May 11 '12 at 00:21

Derek 朕會功夫

92,235
44
185
247

Looking for an alternative to the image onLoad

5 Answers5