onload doesn't fire in Safari if src set to same img twice

[Ross]

I have an application that uses an image which is occasionally loaded
and popped up to the top layer for a couple of seconds, then hidden
again. We don't know what the image will be until it arrives from a
distant server.

Everything was working fine, until I recently noticed that if I
receive an image to show which is the same as the previous one (which
should happen sometimes), it doesn't show up on Safari.

This is working fine on Firefox:

myImage.onload = function() {
picIsUp = true; //set this flag AFTER img
is loaded
}
myImage.setAttribute('src', (aImgName));

In Firefox the picIsUp flag raises as it should every time I get the
image.

However, on Safari, the image loads the first time, but never again.
I speculated that it was not firing onload if the src image attribute
was being set to the same image as the existing one. So after hiding
the myImage behind the top-layer, on expiry of the display period,I
tried to set the src attribute to a blank image, and sure enough now
it fires every time in Safari.

Is there some other way to ensure Safari fires onload each time I set
that src attribute, without using the blank image setting? Loading
the blank image seems to make my web app stall for 1 or 2 seconds
which is a bit ugly. I'm hoping there's some more obvious way.

I could check to see if the new img is the same as the old img but
that seems even more kludgey and would have me storing previous
states.

Thanks in advance for any suggestions,

Ross.

 

[Thomas 'PointedEars' Lahn]

I have an application that uses an image which is occasionally loaded
and popped up to the top layer for a couple of seconds, then hidden
again. We don't know what the image will be until it arrives from a
distant server.

Everything was working fine, until I recently noticed that if I
receive an image to show which is the same as the previous one (which
should happen sometimes), it doesn't show up on Safari.

This is working fine on Firefox:

myImage.onload = function() {
picIsUp = true; //set this flag AFTER img
is loaded

Implementations of the HTMLImageElement interface of W3C DOM Level 2 HTML
do not have a standards-compliant `onload' property, so it is not
reasonable to assume interoperable implementations of it.

One also wonders what you would need this flag for. You are not polling
it, are you?

}
myImage.setAttribute('src', (aImgName));

You do not want to set an attribute here. Replace with

myImage.src = aImgName;

In Firefox the picIsUp flag raises as it should every time I get the
image.

However, on Safari, the image loads the first time, but never again.
I speculated that it was not firing onload if the src image attribute
was being set to the same image as the existing one. So after hiding
the myImage behind the top-layer, on expiry of the display period,I
tried to set the src attribute to a blank image, and sure enough now
it fires every time in Safari.

That is more likely if the HTTP client is advised to cache the resource
long enough.

Is there some other way to ensure Safari fires onload each time I set
that src attribute, without using the blank image setting? Loading
the blank image seems to make my web app stall for 1 or 2 seconds

That happens because you cause the HTTP client to retrieve the document the
script is included into, again (depending on how the document is cached),
and perhaps to display a non-image resource as an image: the empty string
is a same-document URI-reference. You could refer to a dummy image
resource instead.

which is a bit ugly. I'm hoping there's some more obvious way.

I could check to see if the new img is the same as the old img but
that seems even more kludgey and would have me storing previous
states.

You should read about cache-controlling headers and HTTP proxying. If
implementing that ould not help, you could use a time-dependent query part
for the URI or URI-reference.

<http://www.mnot.net/cache_docs/>


PointedEars

 

[Ross]

That is more likely if the HTTP client is advised to cache the resource
long enough.


That happens because you cause the HTTP client to retrieve the document the
script is included into, again (depending on how the document is cached),
and perhaps to display a non-image resource as an image: the empty string
is a same-document URI-reference.  You could refer to a dummy image
resource instead.

Interesting! I will investigate.

You should read about cache-controlling headers and HTTP proxying.  If
implementing that ould not help, you could use a time-dependent query part
for the URI or URI-reference.

<http://www.mnot.net/cache_docs/>

Sounds relevant. I'll take a look.
Thanks for all the info and insights, very informative.

-Ross