Question

I have inserted this script in a webpage with 50 small images ( from 16x16px to 50x50px ):

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('img').css('opacity', '0.0').load(function(){
    $(this).animate({'opacity': '1.0'});
});         
});
</script>

The problem is that not every images are loaded and some doesn’t appears.

Why ?

Answer 1

There are chances that some images are being loaded from cache. And if the image is loaded from cach then load event would fire before dom ready event. One way to do this would be

$('img').css('opacity', '0.0').one('load',function(){
    $(this).animate({'opacity': '1.0'});
}).each(function() {
   if(this.complete) $(this).load();
});

This will loop through the images and check if they has been loaded from cache, if so then it will fire load event for those images.

And I am using $.one to run the event handler only one time as we dont need it to be executed more than one time.

UPDATE:

if(this.complete) will check if the image is already loaded(in case of cached they are) and if they are then it will fire load event for those immediately.

And which are not loaded from cache, browser will fire load event for them after they are loaded.

So the above code will cover all images, cached or not.