What is wrong with this function? It works in Opera and Firefox, but doens't work on Safari under the Windows
function getImage(url) {
var image = document.createElement('img'); // new Image(1, 1);
image.src = url;
image.onload = function() {};
}
when I try getImage('http://site.com/someservlet.gif') This image is not loaded (because someservlet.gif logs all requests) It works in Opera and Firefox, but not in Safari. I tried "new Image()" and "document.createElement('img')" -- the same result.
========== UPDATE: Function works well when it's called directly, problem start when it's called from event listener
<a href="http://google.com/"
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">google</a>
<a href="#"
onclick="getImage('http://127.0.0.1/pic/img.gif?rnd=' + Math.random());">local</a>
<script type="text/javascript">
function getImage(url) {
var image = document.createElement('img');
alert('1');
image.onload = function() {alert(image.src);};
image.src = url;
alert('2');
}
</script>
"local" link works well in Firefox, Opera and Safari (but Safari shows alert1, alert2 and then alert with "src" for some reason, while other browsers show alert1, alertSrc, alert2)
"google" link Opera, Firefox - works well (alert1, alertSrc, alert2), but Safari doesn't - show alertSrc. In Safari you see alert1, alert2 and thats all. Servlet "/pic/img.gif" doesn't get request when someone clicks "google" link from Safari.
What is the problem, how to solve it?
Thanks.
My first impression is that you stumbled upon some optimization code in browsers that defers loading of images that aren't displayed. So far:
Safari 4.0.2 (530.19.1):
Firefox Nightly (3.5.3pre, 20090805):
Google Chrome (2.0.172.39):
Internet Explorer (7.0.6001.18000)
Keep in mind that I changed the image location to http://www.google.com.ar/images/nav_logo6.png since I don't have a random image script running right now. Based on this, I would suggest running a test yourself with different images, and trying non-existent images, images in your cache, images not in your cache.
The reason the alerts aren't necessarily in order is that different browsers load images in different orders, and the alertsrc only happens after the image is loaded. A good check if an image is loaded or not is if the width is 0.
I think it's a cache problem.
When you say image.src = url;
javascript immediately goes to fetch the image, and if the image is cached, then the browser will just used the cached one and fires the onload, and now you say image.onload = function() {};
but onload has already fired, so function()
is never called.
Anyway, this is all just my speculation, I'm not sure if I'm right. However, If I am right, you should be able to fix it by moving image.src = url;
under image.onload = function() {};
try this example in IE and Safary, and works perfectly.
function getImage(url) {
var image = document.createElement('img'); // new Image(1, 1);
image.src = url;
image.onload = function() {alert('ok');};
}
getImage("http://www.google.com.ar/images/nav_logo6.png");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With