New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.
Starred by 40 users

Issue metadata

Status: Fixed
Last visit > 30 days ago
Closed: Jun 2015
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Bug

issue 418903

Sign in to add a comment

Issue 7731: Image onload event does not fire when loading an already loaded image.

Reported by, Feb 14 2009

Issue description

Chrome Version       :
URLs (if applicable) :
Other browsers tested:
Add OK or FAIL after other browsers where you have tested this issue:
     Safari 3: Not tested
    Firefox 3: OK
         IE 7: OK

What steps will reproduce the problem?
Through javascript:
1. Add an onload event to an image element.
2. Set an alert to occur on image load.
3. Change the source of the image to a new image. (Note: successful alert)
4. Change the source of the image back to the original image (Note: onload
event does not fire.)

What is the expected result?
The onload event should load even when loading an image that was already

What happens instead?
The onload never fires when a previously loaded image is loaded again.

Please provide any additional information below. Attach a screenshot if

Comment 1 by, Feb 15 2009

Interesting. Can you provide a test case by any chance?

Comment 2 by, Feb 18 2009

Labels: -Area-Misc Area-WebKit Mstone-X NeedsReduction

Comment 3 by *, Feb 26 2009

Labels: -NeedsReduction Has-reduction
Status: Untriaged
Here is a sample case on this issue:


At original, the image is "Game-shot", click button "Change to Car image" to change 
the image to "Car" image, then click button "Change to Game-shot image" to change 
image back to "Game-shot".

Chrome works fine in this case, in other words, onload event is fired when "Change 
the source of the image back to the original image", THIS is different with what 
reporter says.

But what is different between Chrome/Safari and IE/Firefox is, when click one button 
two times continuously, the onload event for second click is not triggered in 
Chrome/Safari, but triggered in IE/Firefox, this may be a issue.
130 KB View Download
730 bytes Download
92.9 KB View Download

Comment 4 by, Mar 27 2009

Status: Available

Comment 5 by Deleted ...@, Aug 11 2009

I got the same problem with Webkit based browsers (Safari/Chrome).
To solve it, I just pointed the src property to a void location, then I reloaded the 
image (pointed the src back to the image).
That's what I did:

/* Here I previously loaded the image */

			img.src = "";
			img.addEventListener("load", myFunction, false);
			img.src = "http://myImageSource.jpg";

Comment 6 by, Oct 8 2009

Labels: Report-to-webkit

Comment 7 by, Oct 13 2009

Comment 8 by Deleted ...@, Dec 19 2009

ty for the tip, fixed my problem perfectly!

Comment 9 by, Feb 10 2010

The tip of first setting the src to "" also worked for me. Thanks msilva.diego.

Comment 10 Deleted

Comment 11 Deleted

Comment 12 by Deleted ...@, Jul 10 2010

This is not a bug. WebKit is just more strict. You must instantiate a new Image() object before the replacement, like this: 

var photo = document.getElementById('image_id');
var img = new Image();
img.addEventListener('load', myFunction, false);
img.src = 'http://newimgsource.jpg';
photo.src = img.src;

Comment 13 by, Oct 10 2010

None of the solutions above fixed my problem..
i Have a dynamic background image that is changing on clicking different input buttons
and an onload event (javascript) 
the image is generated using PHP and sometimes it is working fine, other times it flickers :(
i cannot identify when this is happening but on IE5 it is working fine.

Comment 14 by, Oct 31 2012

How is this not a bug exactly? The html spec requires that the 'onload' even be fired even for cached and previously accessed URLs.

It's a bug.

Comment 15 by, Oct 31 2012

 Issue 104954  has been merged into this issue.

Comment 16 by, Mar 10 2013

Project Member
Labels: -Area-WebKit Cr-Content

Comment 17 by, Apr 6 2013

Project Member
Labels: -Cr-Content Cr-Blink

Comment 18 by, Jun 17 2014

If you run code with "image.onload" from localhost (example: http://localhost:8383/image-test/index.html then the "onload" is fired multiple times. I uploaded my test page then to and there is onload event was only triggered once (when setting the "src" path to the same one). The trick with setting "src" to an empty string and then assign the same URL again fixes the problem but it also causes image flickering (when changing to an empty string and changing back).

Comment 19 by, Oct 22 2014

Does anyone has a working test case that recreates this bug in canary?

Comment 20 by, Oct 23 2014


Comment 21 by, Nov 17 2014

From what I understand of the description of this bug, I can reduce it to:

This passes for me, as does the test case in comment 3.

However, if I set src to the same value directly, I don't get a second load event. (This is what duplicate  bug 104954  does.)

There is a test case for this in but it passes! It turns out that Blink fires the load event if there is another img element with the same src with the crossorigin attribute present.

Comment 22 by, Nov 17 2014

Blocking: chromium:418903

Comment 23 by, Apr 1 2015

Project Member
The following revision refers to this bug:

r192974 | | 2015-04-01T23:20:17.508363Z

Changed paths:

Fire load event for an image even if it was the last image we loaded successfully.

When we updated image loading to handle alt content using the shadow dom we made
most image loads asynchronous, including loads where the src is null. src='' is a
common idiom for resetting the content of the image but if a user now does "src='';
src=';" the asynchronous image load doesn't get time
to reset the current image stored in memory before the subsequent image loads. 
We have a strange rule in our image loading code that tells us not to fire a load
event if the new image we've loaded is the same as the old one. says
that we should fire load events when we load an image, even if its cached. This
means our practice of not firing load events when we already have an image loaded
is not consistent with the spec or what other browsers do, so always fire a load
event if we load an image. The only exception is if the load is in response to a
viewport resize event and we haven't chosen a new image to load from srcset.

BUG= 472193 ,  7731 

Review URL:

Comment 24 by, May 20 2015

Labels: -Cr-Blink Cr-Blink-Image

Comment 25 by, Jun 22 2015

Status: Started
Is this issue fixed or not?

Comment 26 by, Jun 22 2015

Status: Fixed

Comment 27 by, Sep 21 2015

function internetstart()
//window.addEventListener("load", draw, true);
var canvas = document.getElementById('showimg');
var context = canvas.getContext('2d');

var img1 = new Image();
var img2 = new Image();
canvas.width = 800;
canvas.height = 780;
if(imgctr < 1){ imgctr=imgmax; }
if(imgctr > imgmax){ imgctr=1; }

img1.src = '';
img2.src = '';
img1.src = 'bf' + imgctr + '.jpg';
img2.src = 'bf.png';

document.getElementById('bfafnum').textContent = imgctr + '/' + imgmax;
document.getElementById('bfaf').textContent = "Before";

img1.onload = function() {
img2.onload = function() {
context.drawImage(img1, 0, 0, 800, 780);
context.drawImage(img2, 0, 0, 800, 780);
//context.drawImage(img1, 0, 0, 800, 780);
//context.drawImage(img2, 0, 0, 800, 780);

nested unnested, the commented makes it work better. problem is the size of image bigger more often will not show image. the problem is not constant, but it is frequent, i think there should be a way to ask if it actually did load the img. this onload does not ask if it loaded, or it would show the image. i have tested this on tablet and pc, ps yes unnested is the taught way, assume i have done it un nested because i have. i suppose i should mention the variables for the image number  are var global. i do not feel this is solved at all. i have several pages i put up with this. not  only mine too.

Comment 28 by, Sep 21 2015

ps  it isnt chromes fault, i see no browser works it at all. very erratic

Comment 29 by, Jan 4 2016

This is a serious issue with multipart/x-mixed-replace images - the load event is fired only for the first image, and thus there is no way to monitor if the image stream is still working or not. Any hope this will be fixed? Firefox on the other hand fires the even on each new load.

Comment 30 by, Mar 8 2016

Labels: -Mstone-X -Has-reduction mstone-X has-Reduction
I used setInterval for this issue.

var checkingClearId = setInterval(function () {
    for (var i = 0; i < loadingImages.length; ++i) {
        var im = loadingImages[i];
        if (isImageLoaded(im)) {
            loadingImages.splice(i, 1);
            //do something....
    if (loadingImages.length == 0) {
}, 100);

function isImageLoaded(imgTag):boolean{
	return imgTag["complete"] || imgTag["readyState"] == "complete";

Sign in to add a comment