jQuery Rollovers Non préchargement

Question

$('.ro').hover(
    function(){ 
     t = $(this); 
     t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_o.$2")); 
    }, 
    function(){ 
     t = $(this); 
     t.attr('src',t.attr('src').replace('_o','')); 
    } 
); 

J'utilise ce code afin que (pour examle) test.gif avec la classe « ro » changerait à test_o.gif lors du survol, le problème est quand les images ne sont pas dans le cache il y a un retard sur le renversement et le rolloff. Fondamentalement, si j'efface mon cache et que je visite la page de test, chaque fois que je retourne et remballe l'image, il charge le fichier à chaque fois, de sorte que vous pouvez rester assis pendant des heures et charger les images de survol à chaque fois. Cependant, lorsque je rafraîchis la page et que les images sont maintenant dans la mémoire cache, cela fonctionne instantanément, ce que je dois accomplir.

J'ai essayé d'utiliser cette

http://flesler.blogspot.com/2008/01/jquerypreload.html

plug-in pour précharger les images avec ce

$.preload('.ro'); 

Code

, mais il semble avoir aucun effet.

Des idées?

Answer 1

Il suffit de créer une image (s) fictive sur doc ready, pas besoin de plugin.

$(function(){ 
    $('<img />').attr('src',url); 
}); 

Answer 2

Combine vôtre avec celui sur Preloading images with jQuery et vous obtenez un petit script qui précharger les images les planent alors pour quoi que ce soit avec le sélecteur nommé. par exemple

//preload images 
    $('.ro').each(function(){ 
     $('<img/>').appendTo('body') 
      .css({ display: "none" }) 
      .attr('src',$(this).attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2")); 
    }); 
    //hover them 
    $('.ro').hover(
     function(){ 
      t = $(this); 
      t.attr('src',t.attr('src').replace(/([^.]*)\.(.*)/, "$1_on.$2")); 
     }, 
     function(){ 
      t = $(this); 
      t.attr('src',t.attr('src').replace('_on','')); 
     } 
    ); 

Cette approche est les annexant à l'étiquette du corps pour traiter la question des IE jeter des images qui ne sont pas ajoutés au DOM (comme mentionné dans l'autre poste relatif à ce sujet), mais vous pouvez coller les partout où cela a du sens pour vous. J'aime l'approche dans ce post, car vous n'avez pas besoin de déclarer un tableau d'images à l'avance, il suffit d'adopter une convention de nommage pour les survols et un nom de classe et vous êtes triés.