jQuery image preload doesnt work first time in FireFox

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 开发者_如何学Pythonsure 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.

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");
});

I have some question about your "firefox firstload fix". I use slightly changed code to eliminate the above described firefox error in connection with the jquery flexslider.

$(window).load(function() { 
  $('.flexslider').flexslider({
        animation: "fade",              //String: Select your animation type, "fade" or "slide"
        slideDirection: "horizontal",   //String: Select the sliding direction, "horizontal" or "vertical"
        slideshow: true,                //Boolean: Animate slider automatically
        slideshowSpeed: 7000,           //Integer: Set the speed of the slideshow cycling, in milliseconds
        animationDuration: 1500,         //Integer: Set the speed of animations, in milliseconds
        directionNav: false,            //Boolean: Create navigation for previous/next navigation? (true/false)
        controlNav: false,              //Boolean: Create navigation for paging control of each clide? Note: Leave true for manualControls usage
        controlsContainer: ".flex-container"
  });
});

$(document).ready(function(){
    $('img').load(function() {
        $(this).each(function() {
            /*alert("each func");*/
            /*$(this).animate({opacity : 1.0}, 1000);*/
        });
    }).each(function() {
        if(this.complete) {
            //var src = $(this).attr("src");
            //alert(src);
            $(this).trigger("load");
        };
    });
});

1. I put it after the setup of the flexslider. Is this correct/good like that?
2. I dont't get how it works. You explain that if an image comes frome the browser-cache the load event will not fire. But then I wounder if or why "$('img').load(function()" gets fired. I mean, when the event is not fired because the image came from the cache, we can't hook the 'img'.load because i won't be fired. Other words: Please explain what happens when a image comes from the cache. What in the code or event "area" fails?

UPDATE: www.ozeankreuzer.de it still fails on first load each day. What's wrong? error is: document.body is undefined: https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png