Strange jQuery issue

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 ?

`.load(function)` attaches an `onload` event handler; method name is shared with the ajax-ey `.load(url)`. — lanzz, May 29 '12 at 07:57
The html is very simple ( with 50 img tags ) and without jquery it work perfectly. — xRobot, May 29 '12 at 08:01
Could be due to a few reasons, this might be relevant to you: http://stackoverflow.com/a/5624901/551093 — Christian, May 29 '12 at 08:05
@RoyiNamir http://api.jquery.com/load/ (`Note: The event handling suite also has a method named .load(). jQuery determines which method to fire based on the set of arguments passed to it.`) — lanzz, May 29 '12 at 08:09
@lanzz thanks. if you google _jQuery Load_ - you get only to the ajax ver.... — Royi Namir, May 29 '12 at 08:10

score 4 · Answer 1 · answered May 29 '12 at 07:56

4

Some images might already be loaded when you set their opacity to 0, thus their onload handler has already run and you don't get the chance to make them visible again.

answered May 29 '12 at 07:56

lanzz

38,081
8
81
91

So, what it the best way to do that animation ? Thanks – xRobot May 29 '12 at 08:00
Do not render the images directly in the HTML. Create the image instances with jQuery and attach the `onload` handler before you set their `src` attributes. – lanzz May 29 '12 at 08:02

Prasenjit Kumar Nag · Accepted Answer · 2012-05-29T09:12:51.990

3

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.

edited May 29 '12 at 09:12

answered May 29 '12 at 08:05

Prasenjit Kumar Nag

13,223
3
42
57

and if I want to do the animation for every images ( cached and not ), how can I do ? – xRobot May 29 '12 at 08:24
1

This will do the animation for all images cached or not. :) – Prasenjit Kumar Nag May 29 '12 at 08:39
I have tested it and now all images are loaded but the animation works only on the uncached images :( – xRobot May 29 '12 at 09:45
Can you share the url, so I can check? – Prasenjit Kumar Nag May 29 '12 at 09:53

score 1 · Answer 3 · answered May 29 '12 at 08:01

Set the default opacity value within CSS style, not via javascript. After that, use animate.

<style>
     img { opacity:0 }
</style>

<script type="text/javascript">
$(document).ready(function(){
    $('img').load(function(){
        $(this).animate({'opacity': '1.0'});
    });         
});
</script>

score 0 · Answer 4 · answered May 29 '12 at 07:59

0

use Preload Images javascript code...

<script type="text/javascript">
if (document.images) {
    img1 = new Image();
    img1.src = "image.jpg";
    img2 = new Image();
    img2.src = "image2.jpg";
}
</script>

and now all images preload into client machine and visible always....

OR

Flexible Array

function preload(images) {
    if (document.images) {
        var i = 0;
        var imageArray = new Array();
        imageArray = images.split(',');
        var imageObj = new Image();
        for(i=0; i<=imageArray.length-1; i++) {
            //document.write('<img src="' + imageArray[i] + '" />');// Write to page (uncomment to check images)
            imageObj.src=images[i];
        }
    }
}

answered May 29 '12 at 07:59

Gaurav Agrawal

4,152
9
38
59

This is messy and repetitive. The OP says they have ~50 images. That's a lot of JavaScript, as well as the fact your code sample doesn't even append the image to the document. – Bojangles May 29 '12 at 08:01
OK in that case you can use array code : function preload(images) { if (document.images) { var i = 0; var imageArray = new Array(); imageArray = images.split(','); var imageObj = new Image(); for(i=0; i<=imageArray.length-1; i++) { //document.write('');// Write to page (uncomment to check images) imageObj.src=images[i]; } } } – Gaurav Agrawal May 29 '12 at 08:02

score 0 · Answer 5 · answered May 29 '12 at 08:02

you can better set the opacity for images in css like

img {
opacity:0
}

and then use your code

<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').load(function(){
    $(this).animate({'opacity': '1.0'});
});         
});
</script>

Strange jQuery issue

5 Answers5