.load() is not firing for all images

i have created a gallery script, which first loads images to be shown http://bit.ly/9aQdr3

There are 36 images but image.load() is firing 开发者_StackOverflow中文版only 27 times. here is the code

    var c = 0;
    for(var i =1; i <= 36; i++){
        var img = '<img width="500" src="images/' + i + '.jpg" />'
        $('#gallery .images').append(img);
    }

    $('#gallery .images img').css({display: 'block', position: 'absolute', left: '0px', top: '0px'});
    $('#gallery .images img').hide();
    totalImages = $('#gallery .images img').size();
    $('#gallery .images img').load(function(){          
        c++;
        var ip = parseInt((c/totalImages)*100);                     
        $('#gallery .images p').text('Loading ... ' + ip + '%');            
        if(c == totalImages){               
            $('#gallery .images p').remove();
            $('#gallery .images img').eq(0).show();
            interval = setInterval(startAnimation, 100);
            isPlaying = true;
        }
    });

the problem seems to be here

if(c == totalImages){
    $('#movieShow .images p').remove();
    $('#movieShow .images img').eq(0).show();
    interval = setInterval('startAnimation()', 100);
    isPlaying = true;
}

try to print on the firebug console c and totalImages, maybe you have a problem with the increment of c variable or totalimages is not the expected value.

Note: instead of

interval = setInterval('startAnimation()', 100);

please use

interval = setInterval(startAnimation, 100);

so you can avoid a scope resolution with an expensive eval()