Comment puis-je pré-mettre en cache des images pour un affichage rapide avec javascript?

Question

J'ai une page Web où je veux que l'utilisateur voit une nouvelle image quand ils mettent leur souris sur une certaine partie de l'image. J'ai utilisé une carte d'image.

<img src="pic.jpg" usemap="#picmap" /> 
<map id="picmap" name="picmap"><area shape="rect" coords ="10,20,30,40" 
onMouseOver="mouse_on_write('mouse is on spot')" 
onMouseOut="mouse_off('mouse is off spot')" 
href="http://www....html" target="_blank" /> 
</map> 
<p id="desc"></p> 

Lorsque, dans l'en-tête je définissais ces fonctions:

<script type="text/javascript"> 
function mouse_off(txt) 
    { 
    document.getElementById("desc").innerHTML=txt; 
    document.p1.src="pic.jpg"; 
    } 
function mouse_on_write(txt) 
    { 
    document.getElementById("desc").innerHTML=txt; 
    document.p1.src="pic2.jpg"; 
    </script> 

Il fonctionne, mais il est lent. Lorsque la souris est placée sur la deuxième image, il faut quelques secondes pour apparaître; Ma solution temporaire consistait à réduire drastiquement la taille des images car elles étaient énormes (à 2,5 Mo, elles passent rapidement, mais ne sont pas toujours transparentes). Comment rendre le changement d'image plus transparent sans réduire la qualité de l'image? En y réfléchissant, je me rends compte que je pourrais aussi avoir les deux images affichées, à petite et grande échelle, et sur la souris, elles changeraient de place; Comment ferais-je cela? Est-ce que cela réduirait le décalage?

Answer 1

Vous n'avez pas besoin de créer des éléments de page, il peut tous être préchargé à l'aide JavaScript:

tempImg = new Image() 
tempImg.src="pic2.jpg" 

EDIT:

Si vous avez beaucoup d'images, vous pouvez utiliser multi-preloader du pauvre-homme:

preloads = "red.gif,green.gif,blue.gif".split(",") 
var tempImg = [] 

for(var x=0;x<preloads.length;x++) { 
    tempImg[x] = new Image() 
    tempImg[x].src = preloads[x] 
} 

Answer 2

Ce que vous voulez faire est de précharger les images dans les coulisses.

Ensuite, lorsque vous passez la souris, le navigateur aura déjà cette image dans son cache et la basculera très rapidement.

function preloadImage(imagePath) 
{ 
    var img = document.createElement('IMG'); 
    img.src = imagePath;   
} 

preloadImage('BigImage'); 

Answer 3

Vous pouvez également mettre les deux images dans le même fichier et le compenser de haut en bas. Si elle doit affecter l'élément que vous avez franchi avec la souris, il pourrait ressembler à

a { 
    background-image: url(back.png); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: 0 0; 
} 

a:hover { 
    background-image: url(back.png); 
    background-repeat: no-repeat; 
    background-attachment:fixed; 
    background-position: 0 20px; 
} 

De cette façon, il peut fonctionner sans javascript. Si je comprends bien votre cas, vous avez toujours besoin de javascript, mais vous pouvez néanmoins "précharger" l'image de cette manière.

Answer 4

Faire ceci avec des sprites est une bonne solution, car vous n'avez pas besoin d'attendre pour charger la nouvelle image. Les sprites fonctionnent en combinant les deux images en une seule et en modifiant le décalage d'arrière-plan au passage de la souris.

Vous pouvez même faire avec CSS à la place, pour des résultats beaucoup plus rapides. Il y a un bon tutoriel sur ce here.

Answer 5

Utilisez display: none;, puis changez le Javascript en display: inline lorsque vous voulez l'afficher. Cela a l'avantage supplémentaire de pouvoir placer l'image exactement où vous voulez dans la source de la page, plutôt que d'avoir à l'ajouter avec Javascript plus tard.

Answer 6

Solution intelligente de Diodeus. Cependant, à moins qu'il y ait une bonne raison, vous devriez vraiment envisager d'utiliser des sprites. C'est un peu de travail pour les installer, mais l'efficacité nette en vaut vraiment la peine.

Cette approche est la règle numéro un dans High Performance Web Sites de Steve Souder.

"Règle 1 - Faire moins de demandes HTTP"

Bonne chance et amusez-vous. - D.

Answer 7

Voici comment je le fais, en JavaScript pur:

var myImgs = ['path/to/img1.jpg', 'path/to/img2.gif']; 

function preload(imgs) { 
    var img; 
    for (var i = 0, len = imgs.length; i < len; ++i) { 
     img = new Image(); 
     img.src = imgs[i]; 
    } 
} 

preload(myImgs); 

Cela dit, la suggestion de ALassek d'utiliser des sprites CSS est excellente, si vous avez la portée de le faire. Les avantages des sprites sont nombreux: moins de requêtes HTTP, plus petite taille de téléchargement (habituellement), fonctionne sans JavaScript activé.

Answer 8

J'ai remarqué que « préchargement » dans .src à ce jour ne fonctionne pas de manière cohérente dans tous les navigateurs - vous pouvez voir clairement qu'il ya une - IE7 encore ne peut pas comprendre comment mettre en cache/utiliser des images pré-chargées demande de serveur faite chaque fois que vous passez la souris. Ce que je fais est charger dans toutes les images via le placement HTML standard et simplement activer/désactiver style.display.

Answer 9

http://www.filamentgroup.com/lab/update_automatically_preload_images_from_css_with_jquery/

Lorsque nous avons lancé le laboratoire, nous avons publié un plugin jQuery qui précharge automatiquement toutes les images référencées dans les fichiers CSS. Nous avons trouvé le script extrêmement utile dans le développement d'applications dynamiques où les images sont toujours prêtes lorsque nous en avons besoin. Cet article décrit une mise à jour importante du script qui facilitera son intégration dans les projets existants.

Answer 10

Au Javascript 1.6 cela peut être accompli sans variables nommées:

imageList.forEach(function(path) { new Image().src=path });