Une fonction javascript pour precharger vos images lourdes

Publié le 19 août 2008 par Avi Teboul

Sahid Ferdjaoui, un développeur , a créer cette petite perle qui permet de pré charger indépendamment les images un peu lourde .

Il n'y a rien de revolutionaire dans cette fonction tout est dans son utilité :)

  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;
  }

Voici comment la fonction s'utilise .. rien de bien sorcier .

  <!– sans redimensionnement –>
  <img src=“images/ajax-loader.gif” onload=“preload (’images/larges/big.jpg’)”/>
  <!– avec redimensionnement homothetique sur la largeur –>
  <img src=“images/ajax-loader.gif” onload=“preload (’images/larges/big.jpg, 300′)”/>
  <!– avec redimensionnement homothetique sur la hauteur –>
  <img src=“images/ajax-loader.gif” onload=“preload (’images/larges/big.jpg, null, 300′)”/>
  <!– avec redimensionnement –>
  <img src=“images/ajax-loader.gif” onload=“preload (’images/larges/big.jpg, null, 300, 400′)”/>


La demo est visible directement chez sahid