I can't seem to find a definitive answer to this one...

Assume I have a JavaScript reference to an image on the page and I bind a load event handler to that element. For example, something like this:

HTML

<img id="myImage" src=".jpg" />

JavaScript

var $myImage = $('#myImage');
$myImage.load(function() {
    alert('Image loaded!')
});

Now, if I do this:

var imageElem = $myImage[0];
imageElem.src = imageElem.src; // Re-assign the image source path

...will the load event handler fire even if the image has already been loaded from the server? It seems to do in Firefox, but is it safe to rely on this behaviour?

(The reason I ask is I've seen this used in a jQuery plugin to check when all images have been loaded. If the image is loaded before the load event handler is bound, then it won't fire, unless it's re-triggered using the method above.)

I can't seem to find a definitive answer to this one...

Assume I have a JavaScript reference to an image on the page and I bind a load event handler to that element. For example, something like this:

HTML

<img id="myImage" src="http://example./image.jpg" />

JavaScript

var $myImage = $('#myImage');
$myImage.load(function() {
    alert('Image loaded!')
});

Now, if I do this:

var imageElem = $myImage[0];
imageElem.src = imageElem.src; // Re-assign the image source path

...will the load event handler fire even if the image has already been loaded from the server? It seems to do in Firefox, but is it safe to rely on this behaviour?

(The reason I ask is I've seen this used in a jQuery plugin to check when all images have been loaded. If the image is loaded before the load event handler is bound, then it won't fire, unless it's re-triggered using the method above.)

• javascript
• dom
• dom-events

3 Answers 3

Setting img.src should trigger load, with some caveats. According to jQuery's own documentation regarding the .load event,

Caveats of the load event when used with images

A mon challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have pletely loaded. There are several known caveats with this that should be noted. These are:

• It doesn't work consistently nor reliably cross-browser
• It doesn't fire correctly in WebKit if the image src is set to the same src as before
• It doesn't correctly bubble up the DOM tree
• Can cease to fire for images that already live in the browser's cache

checked this in Chrome inspector:

> img = document.createElement('img')
    <img>​
> img.addEventListener('load', function(e) {console.log('loaded');});
    undefined
> img.src = 'http://placekitten./200/300';
    "http://placekitten./200/300"
    loaded
> img.src = 'http://placekitten./200/300';
    "http://placekitten./200/300"
> img.src = 'http://placekitten./200/30';
    "http://placekitten./200/30"
    loaded 
> img.src = 'http://placekitten./200/300';
    "http://placekitten./200/300"
    loaded
> img.src = 'http://placekitten./200/300';
    "http://placekitten./200/300"

So to answer with regards to Chrome - no, not unless you set the src to something else first.

I had this problem too and found a simple solution.

You can fire the loaded event multiple times by replacing the source attribute. Even if the value equals the existing source. You just have to add an different parameter, which is ignored by the server.

Take a look at this example:

var source = "http://example./image.jpg";
var imageElement = document.createElement('img');
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded
imageElement.src = source + "?ignorethis=" + new Date().getTime(); // loaded again

I know, it's a bit dirty, but works cross-browser.