Question

The ideas is to show the loading div while the image is loading and hide the div when finished. This code works on Chrome/firefox but not on IE. Any idea?

Html file

//image
<img src="image.php" class="loading">

//loading tag
<div id="loaddiv">
    <div id="loading_float"><img src="src/img/loading.gif">
    <br>Loading..
    </div>
</div>

JS file

var imgs_count=0, imgs_loaded=0;
$(function(){
$loading = $('.loading');
if($loading.size()>0){
    $loading.load(function(){
        $('#loaddiv').hide();
    });
}else{
    $('#loaddiv').show(); 
}
});

Answer 1

You cannot reliably use javascript to attach onload handlers to an image that is in the page’s HTML. That’s because the image may already be loaded before your javascript even gets a chance to run as the page DOM (and images referred to by it) starts loading before javascript has a chance to run and find those very DOM elements. This problem is worse in IE once the image is in the browser cache as IE loads the image pretty much instantaneously in that case.

There are two possible work-arounds:

1. Specify the onload handler in the actual HTML with the onload attribute.
2. Don’t put the images in the HTML of the page. Use javascript to create them dynamically and assign onload handlers before the .src attribute is set on the image object so you are sure not to miss the onload event.
3. When your javascript runs and before you install the load handler, check to see if the image is already loaded and act accordingly.