javascript - Will setting the image.src to itself cause onLoad to fire? - Stack Overflow

admin管理员组

文章数量:1319463

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

Share Improve this question Follow edited Jul 22, 2022 at 16:06 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Dec 13, 2012 at 16:49 FixMakerFixMaker 3,87744 gold badges3030 silver badges4848 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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.

本文标签： javascriptWill setting the imagesrc to itself cause onLoad to fireStack Overflow