jQuery image précharge ne fonctionne pas première fois dans FireFox

Question

Je viens de terminer la mise en place d'une simple galerie jQuery avec quelques transitions évanouissement comme vu here. Tout fonctionne bien dans tous les navigateurs - sauf que le "préchargement d'image" ne fonctionne pas sur le premier chargement de FireFox (fonctionne dans tous les autres navigateurs). Les images restent à 0% d'opacité dans Firefox. Pas certain de pourquoi.

Voici le code de précharge.

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

Merci d'avance pour toute aide.

Answer 1

En curiosité, essayez:

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

Pour rendre votre solution plus robuste, vous devriez envisager de forcer l'événement de chargement à feu pour chaque image dans le cas où il a été mis en cache par le navigateur, ce qui peut empêcher son événement de charge de se déclencher. Vous pouvez le faire en testant la propriété .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

J'ai une question sur votre « Firefox fix Firstload ». J'utilise un code légèrement modifié pour éliminer l'erreur firefox décrite ci-dessus en relation avec le 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. je l'ai mis après la configuration du flexslider. Est-ce correct/bon comme ça?
2. Je ne comprends pas comment cela fonctionne. Vous expliquez que si une image provient du cache du navigateur, l'événement de chargement ne se déclenchera pas. Mais alors je bluffe si ou pourquoi "$ ('img'). Load (function()" est renvoyé.Je veux dire, quand l'événement n'est pas déclenché parce que l'image provient du cache, nous ne pouvons pas accrocher le 'img' .load parce que je ne serai pas mis le feu autres mots:.. S'il vous plaît expliquer ce qui se passe quand une image vient du cache Qu'est-ce dans le code ou d'un événement « zone » ne

MISE à JOUR: www.ozeankreuzer.de il échoue toujours sur la première charge chaque jour Quel est le problème erreur est:.? document.body est indéfini: https://dl.dropbox.com/u/31225678/Screenshot%20-%2014.06.2012%20%2C%2003_12_28.png