Prechargement d’images en Javascript
le 19 août 2008 par sahid
Javascript, prechargement d’images (images loader)
Javascript, prechargement d’images (images loader)
Une fonction Javascript toute bete pour faire patienter vos visiteurs durant le chargement d’images un peu lourdes.
Exemple:
Source:
-
preload = function (o, img_src, w, h) {
-
var img = new Image ();
-
img.onload = function () {
-
o.onload = null;
-
if (w) o.width = w;
-
if (h) o.height = h;
-
o.src = img.src
-
};
-
img.src = img_src;
-
}
Ajout d’un effet de fade-in à la fonction (utilisé ici)
Exemple:
Source:
http://sahid.funraill.org/wp-content/uploads/2008/09/preload-with-fadein.html
Usage:
-
<!– sans redimensionnement –>
-
<img src=“images/ajax-loader.gif” onload=“preload (this, ‘images/larges/big.jpg’)”/>
-
-
<!– avec redimensionnement homothetique sur la largeur –>
-
<img src=“images/ajax-loader.gif” onload=“preload (this, ‘images/larges/big.jpg, 300′)”/>
-
-
<!– avec redimensionnement homothetique sur la hauteur –>
-
<img src=“images/ajax-loader.gif” onload=“preload (this, ‘images/larges/big.jpg, null, 300′)”/>
-
-
<!– avec redimensionnement –>
-
<img src=“images/ajax-loader.gif” onload=“preload (this, ‘images/larges/big.jpg, null, 300, 400′)”/>
19 août 2008 at 16:22
Très très sympa, sauf le redimensionnement de l’image de chargement qui devient énorme…
19 août 2008 at 17:28
Je pense plutot que ca marche comme ca :
Il manque un petit “this”…
19 août 2008 at 17:56
Salut,
Tres juste Steve, j’ai oublié le this dans mes exemples :) c corrigé.
Sylvain, ton probleme de redimensionnement venait de là ?
19 août 2008 at 19:24
Quel exemple d’accessibilité …
Ceux qui n’ont pas le JS d’activé, ils font quoi ? Ils doivent alors chercher les images dans le code sources ?
19 août 2008 at 21:44
Si le JS n’est pas activé, l’image est préloadé normalement par la navigateur…
y’a un src pour rien !
11 septembre 2008 at 14:42
Ahh l’accessibilité c’est bien.
Mais comme tout cela a des limites.
A vouloir satisfaire tout le monde on ne satisfait personne.
Et puis vous êtes trop habitués au tout mâché.
Sahid vous propose un code génial, il ne tient qu’à vous de le rendre accessible ;)
11 septembre 2008 at 15:02
Sahid, j’ai un problème à te soumettre en rapport avec ton code.
Je chercher à effectuer la même chose mais concernant une image chargée en background par CSS.
L’objectif est de redimensionner une image de bulle affichée par le plugin jQuery Tooltip 1.3.
(http://jquery.bassistance.de/tooltip/demo/)
De la redimensionner pour que sa taille s’adapte au texte qu’elle va contenir.
Une telle image chargée par un CSS est déjà en mémoire une fois le body attaqué par le navigateur.
Il faut donc pouvoir naviguer avec js dans le DOM pour l’atteindre et modifier sa taille.
A moins qu’elle ne se charge, comme je le pense qu’au moment de la sollicitation de la balise CSS.
Et, si tout cela est possible, plusieurs fois au sein d’une même page.
Une petite idée ? Une piste ?
Et, si tu veux bien, un nouveau challenge comme tu dis :)
Cordialement
Heirem