Préchargement des images avec javascript
- 20-04-2010
- Posté dans Javascript
- Écrire un commentaire
Cette fonction permet de précharger des images dans le cache du navigateur (pour un rollover par exemple) :
function preloadImages() {
var preloaded = new Array();
for (var i = 0; i < arguments.length; i++){
preloaded[i] = document.createElement('img');
preloaded[i].setAttribute('src',arguments[i]);
};
};
Utilisation :
preloadImages(
"images/a.jpg",
"images/b.jpg",
"images/c.jpg",
"images/d.jpg",
"images/e.jpg"
);
est ce possible pour les liens?
Qu'est-ce que tu appelles liens ?
Tu peux mettre en cache des fichiers (par exemple javascript ou css) en utilisant ce code :
var preloaded = new XMLHttpRequest();preloaded.open('GET', 'monfichier.js-ou-css');
preloaded.send('');
Dans le même esprit, la fonction serait alors :
function preloadFiles() {var preloaded = new Array();
for (var i = 0; i < arguments.length; i++){
preloaded[i] = new XMLHttpRequest();
preloaded[i].open('GET', arguments[i]);
preloaded[i].send('');
};
};
Est-il possible de détecter la fin du chargement des images pour déclencher une nouvelle fonction une fois ces images completement chargées?
J'utilise un script qui nécessite de savoir la hauteur d'un bloc qui contient des images et tant que les images ne sont pas chargées, la hauteur n'est donc pas définie. Sous IE et FF ils conservent les dimensions mais Safari&Chrome non.
Du coup je dois trouver un moyen de préloader les images pour ainsi définir l'espace qu'ils occuperont avant de lancer le script. C'est possible?
Pour "déclencher une nouvelle fonction une fois ces images completement chargées" tu mets ta fonction après la boucle "for {}" ou après avoir appelé la fonction "
preloadFiles()".Mais depuis la version 1.4 de jquery, les fonctions $.().height() et $.().width() retournent les dimensions de l'image une fois chargées, donc jamais 0. Je n'ai pas fait de test, mais c'est ce que j'ai lu sur les nouveautés.
Tiens-moi au courant pour me dire si tu y es arrivé.
Bonjour,
J'ai des images de fond assez lourdes pour mon site et ce code est le bienvenu mais :
Comment on appelle la fonction? window.onload = preloadImages;?
et arguments est une variable ?
Oui, arguments est la variable qui contient les paramètres passés à la fonction preloadImages.
Quand tu appelles la fonction preloadImages il te faut mettre en parenthèses la liste des images que tu veux précharger, comme sur l'exemple.
windows.onload est une possibilité, mais tu peux appeler la fonction directement en la mettant à la fin de ton code, juste avant la balise de fermeture </body>