FireFox Image Loading Bug?

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

FireFox Image Loading Bug?

Erik Uzureau-3
If anyone can figure out the problem here, I would be forever grateful:

http://dev.openlayers.org/sandbox/euzuro/untiled3/examples/ffbug.html

The problem is that I am getting multiple calbacks to "onload" if I
load an image
twice in a row like this:

var bImg = $("bImg"); //get img DOMElement
bImg.src = "http://www.technoccult.com/wp-content/gonzogothic.jpg";
bImg.src = "http://www.technoccult.com/wp-content/gonzogothic.jpg";


But it only seems to happen if that image has been loaded elsewhere on
the page.
Very strange indeed. See example.

http://dev.openlayers.org/sandbox/euzuro/untiled3/examples/ffbug.html


I still haven-t looked into the OpenLayers.Event/Events classes to see
if the problem might be in there.... but that't the only lead I have
left.

Any feedback is appreciated.

Erik
_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev
Reply | Threaded
Open this post in threaded view
|

Re: FireFox Image Loading Bug?

Tim Schaub-2
Erik Uzureau wrote:
> If anyone can figure out the problem here, I would be forever grateful:
>
> http://dev.openlayers.org/sandbox/euzuro/untiled3/examples/ffbug.html

Hmm.  I would call this expected behavior.  (I also see the same thing
in non-FF browsers, so I'm wondering if I'm looking at different output.)

Here's what makes sense to me.  Two sequences:

Gothic (1)
----------
1) you set the src of img1a to be Gothic
2) when that image finishes loading, you set the src of img1b to be
Gothic - the browser has this image handy, so it is able to trigger
onload *before* returning from this line
3) in the very next line, you set the src of img1b again to Gothic -
again, the browser has this image handy and it triggers onload

Thompson (2)
------------
1) you set the src of img2a to be Thompson#12345
2) when that image finishes loading, you set the src of img2b to be
Thompson - the browser doesn't have this image handy, so it makes an
asynchronous request for it, not triggering onload until it is loaded,
and returning immediately to execute the next line
3) in the very next line, you set the src of img2b again to be Thompson
- the browser is still busy waiting for this image to download, but it
respects your request to set the src again, cancels the previous
requests (or at least stops listening for the response), and requests
the image again.  Even if it is smart enough to wait for the same
response, it makes good sense that the first process stops listening for
the response and the second one takes over the response handling.
4) whenever the Thompson image finishes loading, you see onload
triggered once - because there is only one process listening for it.

Basically, if an image is already in the cache, it makes sense to me that

   for(var i=0; i<3; ++i) {image.src = "cached.jpg";}

would trigger onload 3 times.

And, it also makes sense to me that if an image is not already loaded, then

   for(var i=0; i<10; ++i) {image.src = "uncached.jpg";}

would trigger onload an unknown number of times - likely once - based on
when it finished loading the image.

Sensible?
Tim

PS -
And a quick test in Firebug confirms the above.  After loading your
page, I run the following:

var image = $('img1b');
image.onload = function() {console.log('loaded');}
var cached = image.src;
for(var i=0; i<3; ++i) {image.src = cached;}

And, as you'd expect, 'loaded' shows up three times in the console.  To
test the second bit, I continue on with:

var uncached = "http://www.midwestrocklobster.com/ugly/ugly3_lg.gif";
for(var i=0; i<3; ++i) {image.src = uncached;}

And, again as you might expect, 'loaded' shows up once - after the image
has finished loading.


_______________________________________________
Dev mailing list
[hidden email]
http://openlayers.org/mailman/listinfo/dev