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

Issue 7731 link

Starred by 40 users

Issue metadata

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

Blocking:
issue 418903



Sign in to add a comment

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

Reported by tim.cost...@gmail.com, Feb 14 2009

Issue description

Chrome Version       : 1.0.154.48
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
loaded.

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
possible.

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

Comment 2 by jon@chromium.org, Feb 18 2009

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

Comment 3 by *mdu@chromium.org, Feb 26 2009

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

http://go/reductions/7731/test-standard.html

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.
game-shot.jpeg
130 KB View Download
test-standard.html
730 bytes Download
car.jpeg
92.9 KB View Download

Comment 4 by jon@chromium.org, 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";






Labels: Report-to-webkit

Comment 7 by hclam@chromium.org, Oct 13 2009

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

ty for the tip, fixed my problem perfectly!

Comment 9 by drewa...@gmail.com, 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 drinking...@abv.bg, 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.

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

http://www.w3.org/TR/html5/the-img-element.html#the-img-element

It's a bug.
Cc: jryans@chromium.org
 Issue 104954  has been merged into this issue.
Project Member

Comment 16 by bugdroid1@chromium.org, Mar 10 2013

Labels: -Area-WebKit Cr-Content
Project Member

Comment 17 by bugdroid1@chromium.org, Apr 6 2013

Labels: -Cr-Content Cr-Blink
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 github.io 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 y...@yoav.ws, Oct 22 2014

Does anyone has a working test case that recreates this bug in canary?
Cc: -jryans@chromium.org

Comment 21 by zcorpan@gmail.com, Nov 17 2014

Cc: y...@yoav.ws
From what I understand of the description of this bug, I can reduce it to:

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/3306

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.

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/3304 (This is what duplicate  bug 104954  does.)

There is a test case for this in http://w3c-test.org/html/semantics/embedded-content/the-img-element/relevant-mutations.html 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.

http://software.hixie.ch/utilities/js/live-dom-viewer/saved/3305

Comment 22 by zcorpan@gmail.com, Nov 17 2014

Blocking: chromium:418903
Project Member

Comment 23 by bugdroid1@chromium.org, Apr 1 2015

The following revision refers to this bug:
  http://src.chromium.org/viewvc/blink?view=rev&rev=192974

------------------------------------------------------------------
r192974 | robhogan@gmail.com | 2015-04-01T23:20:17.508363Z

Changed paths:
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/images/onload-event-when-reloading-image-after-interrupted-broken-image-load-expected.txt?r1=192974&r2=192973&pathrev=192974
   M http://src.chromium.org/viewvc/blink/trunk/Source/core/loader/ImageLoader.cpp?r1=192974&r2=192973&pathrev=192974
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/images/onload-event-when-reloading-image-after-successful-image-load.html?r1=192974&r2=192973&pathrev=192974
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/images/onload-event-when-reloading-image-after-interrupted-broken-image-load.html?r1=192974&r2=192973&pathrev=192974
   A http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/images/onload-event-when-reloading-image-after-successful-image-load-expected.txt?r1=192974&r2=192973&pathrev=192974

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='www.example.com/someimage.gif;" 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.

https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element 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: https://codereview.chromium.org/1047563002
-----------------------------------------------------------------

Comment 24 by tkent@chromium.org, May 20 2015

Labels: -Cr-Blink Cr-Blink-Image

Comment 25 by noel@chromium.org, Jun 22 2015

Owner: robho...@gmail.com
Status: Started
Is this issue fixed or not?

Comment 26 by robho...@gmail.com, Jun 22 2015

Status: Fixed
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.

ps  it isnt chromes fault, i see no browser works it at all. very erratic
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.
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....
            --i;
        }
    }
    if (loadingImages.length == 0) {
        clearInterval(checkingClearId);
	}
}, 100);
if(intervalId)intervalId.push(checkingClearId);


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

Sign in to add a comment