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 (imgObjectplete) {

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

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.plete) {

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

• javascript
• image
• preload

1 Answer 1

.plete 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)