Problème de préchargement d'image (avec $ ("img"). Load())

Question

J'utilise la fonction de chargement pour précharger les images avant d'appliquer un effet de survol.

$("img").load(function(){ //image preloading 

//some function & variable setting 

    $listingItems.hover(
     function(){ 
      //effect 
     }, 
     function(){ 
      //effect back 
     } 
    ) 

}) // load 

le problème que j'ai i que les effets ne fonctionne que si je recharge la page. Quand je viens d'abord à la page, les images sont chargées mais il n'y a pas d'effet de survol.

Vous pouvez jeter un oeil à la source ici: http://meodai.ch/rundum/shop.html

Qu'ai-je fait de mal? Quelqu'un peut-il aider? Existe-t-il un autre moyen simple de précharger les images avant d'exécuter une fonction?

Answer 1

L'événement load ne se déclenche pas si l'image vient du cache dans certains navigateurs, mais il y a un travail autour pour en vérifiant la propriété .complete et en utilisant .one() pour vous assurer que le gestionnaire d'événements load déclenche une seule fois, comme celui-ci :

$("img").one('load', function(){ 
    //current code 
}).each(function() { 
    if(this.complete) $(this).load(); 
}); 

Cette boucles bien que les images, si elles sont .complete (soit chargé vraiment rapide ou du cache), il déclenche le gestionnaire d'événements load, si déjà couru (le vraiment cas de charge rapide) , pas sw manger, c'est ce que le .one() est pour.