Javascript Image Object - Handle onload Event

Question

I'm trying to preload image on click event:

// new image object
var imgObject = new Image();

// assign the path to the image to the src property
imgObject.src = document.URL + 'image/image.jpg';

// check if image has loaded
if (imgObject.complete) {

But the complete call never returns true on the first click - any idea what I'm missing here?

James Hill · Accepted Answer · 2011-09-28 19:50:12Z

13

.complete is a property of the image object, not an event that you can attach to. Use the onload event:

var image = new Image();
image.onload = function() {
    alert('image loaded');
};
image.src = document.URL + 'image/image.jpg';

Note: Be sure to attach to the onload hander before setting the source attribute.

Note Explanation: Image caching. If the image is cached then the onload event will fire immediately (sometimes before setting the handler)

edited Sep 28, 2011 at 19:50

answered Sep 28, 2011 at 19:29

James Hill

62.1k22 gold badges150 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user398341 Over a year ago

well - I can't really, it has to be on click - and it opens the url taken from the href attribute of the <a> tag - unless I obviously misunderstood your suggestion.

user398341 Over a year ago

Why is it important to call it before the src property is set?

user398341 Over a year ago

Thanks James - it seem to be working now. I'm just wondering why the .complete call didn't work.

James Hill Over a year ago

@user398341, .complete is a property stating whether the image has been loaded, not an event that you can attach to. Your if statement was run immediately after setting the image src - it probably would never be true at that point (unless it was cached maybe?). I've updated the answer a little to make that a bit more clear.

Collectives™ on Stack Overflow

Javascript Image Object - Handle onload Event

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related