2010-10-13 26 views
0

J'ai une image avec l'attribut set src.Précharger l'image gracieusement en Javascript (sans bibliothèque JS)?

Je voudrais remplacer l'image, mais la connexion avec le serveur est lente et le temps qu'il faut pour charger une nouvelle image n'est pas négligeable.

Est-il possible de créer un objet Image interne, de définir le type "onLoadListener", de charger une image, puis de la définir sur l'attribut src de l'image d'origine?

+0

Cela est possible, mais cela dépend des paramètres de mise en cache du client. Si la mise en cache est complètement désactivée par le client, vous aurez un nombre de requêtes doublé. (un pour la tentative de préchargement d'une image, un pour l'affichage réel) (using 'Image') – Lekensteyn

+0

Heureusement, la mise en cache est activée dans mon cas d'utilisation :) – pixel

Répondre

2

Vous pouvez les images pré-charge en JavaScript comme celui-ci ...

myImage = new Image(); 
myImage.onload = function() { alert("Loaded"); }; 
myImage.src = "logo.gif"; 

Vous pouvez mettre la logique pour faire apparaître l'image sur la page au lieu d'alerte-ing.

+0

Mais quand ma connexion est lente, l'utilisateur verra Image vide pendant un moment. Donc, je devrais charger Image comme ceci et définir myActualImageOnPage.src = myImage.src – pixel

+0

@pixel oui, il veut dire de changer le 'src' sur votre élément réel pendant la méthode' onload' de votre objet image factice. – lincolnk