La precarga de imagen de jQuery no funciona por primera vez en FireFox

Question

Acabo de armar una galería jQuery simple con algunas transiciones de desvanecimiento como se ve here. Todo funciona bien en todos los navegadores, excepto que la "precarga de imagen" no funciona en la primera carga en Firefox (funciona en todos los demás navegadores). Las imágenes permanecen al 0% de opacidad en Firefox. No estoy seguro por qué.

Aquí está el código de precarga.

$(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'}); 
    }); 
}); 

Gracias de antemano por cualquier ayuda.

Answer 1

Como cuestión de curiosidad, probar:

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

Para que su solución más robusta, se debe considerar que obligó al evento de carga de fuego para cada imagen en el caso de que se ha almacenado en caché por el navegador, que puede evitar que su evento de carga se desencadene. Usted puede hacer esto mediante la prueba de la propiedad .complete:

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

Answer 2

tengo alguna pregunta acerca de su "solución Firstload Firefox". Uso un código ligeramente modificado para eliminar el error de Firefox descrito anteriormente en relación con 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. lo puse después de la configuración de la flexslider. ¿Es esto correcto/bueno así?
2. No entiendo cómo funciona. Explica que si una imagen proviene de la memoria caché del navegador, el evento de carga no se disparará. Pero luego me pregunto si o por qué se dispara "$ ('img'). Load (function()". Quiero decir, cuando el evento no se activa porque la imagen proviene del caché, no podemos conectar el 'img' .load porque no voy a ser despedido Otras palabras:.. por favor explique lo que sucede cuando una imagen proviene de la caché lo que en la "zona" código o si falla

ACTUALIZACIÓN:? www.ozeankreuzer.de aun falla en la primera carga de cada día ¿Qué pasa error es:.? document.body no está definido: https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png