javascript crossbrowser new Image()

Question

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.

Answer 1

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");

Answer 2

The only way I couldn't get it to work in IE was to use new Image() rather than document.createElement. That was fixable by moving image.src to after your onload function:

image.onload = function() {}
image.src = url;

Answer 3

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):

• works for me, as described (both local, google, and when I changed the event to mouseover)
• ordering of the alerts is alert1, alertsrc, alert2

Firefox Nightly (3.5.3pre, 20090805):

• works as described. Funny, since it didn't work at first. Try loading the image into your cache, see if it affects the test.
• ordering of the alerts is alert1, and then alertsrc and alert2 at the same time (move the dialog to see both)

Google Chrome (2.0.172.39):

• works as in Safari, although mouseover seems to fire too many events
• ordering of the alerts is alert1, alert2, alertsrc

Internet Explorer (7.0.6001.18000)

• works as described (both local, google, and when changed to mouseover)
• ordering of the alerts is alert1, alertsrc, alert2

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.

Answer 4

hi, i was having the same problem ... did you find a solution for this [1]? mypost

Answer 5

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() {};