jQuery image preload doesnt work first time in FireFox

Question

I just finished putting together a simple jQuery gallery with some fading transitions as seen here. Everything works fine in all browsers - except that the "image preloading" doesn't work on the first load in FireFox (works in all other browsers). The images stay at 0% opacity in firefox. Not sure why.

Here is the preload code.

$(document).ready(function(){
    //--------PRELOAD LOAD IMAGES--------\\
    $('img').load(function() {
        //once image has loaded fade in image
        $(this).animate({opacity : 1.0}, 1000);

        //kill padding on last thumbnail of each line
        $('#headshots img').eq(3).css({'padding-right' : '0'});
        $('#ports img').eq(3).css({'padding-right' : '0'});
        $('#ports img').eq(7).css({'padding-right' : '0'});
    });
});

Thanks in advance for any help.

Answer 1

As a matter of curiosity, try:

$(this).each(function() {
    $(this).animate({opacity : 1.0}, 1000);
});

To make your solution more robust, you should consider forcing the load event to fire for each image in the event that it has been cached by the browser, which can prevent it's load event from triggering. You can do this by testing for the .complete property:

$('img').load(function() {
    $(this).each(function() {
        $(this).animate({opacity : 1.0}, 1000);
    });
    $('#headshots img').eq(3).css({'padding-right' : '0'});
    $('#ports img').eq(3).css({'padding-right' : '0'});
    $('#ports img').eq(7).css({'padding-right' : '0'});
}).each(function() {
    if(this.complete) $(this).trigger("load");
});