jQuery.info
Découvrir et utiliser jQuery, la librairie javascript du XXIIème siècle

Accueil du site > Trucs et astuces > Ajouter une image dans une page

Ajouter une image dans une page

samedi 26 août 2006, par Fil

Comment charger (en javascript) une image dans un document.


Sur la mailing-list de jquery, sDisk donnait un script permettant d’ajouter une image dans un document, et lancer une action (ici, une alerte) quand l’image a fini de charger.

Le problème du code proposé est qu’il ne fonctionnait pas sur Safari, je l’ai donc un peu réécrit.

Ce qui est intéressant — outre la question du chargement d’une image dans le DOM —, c’est que ce script est écrit comme un plugin de jQuery. Une première partie du code ajoute une fonction .image() à la librairie de la fonction $() ; une deuxième partie exploite cette fonction...

D’abord, le plugin :

$.fn.image = function(src, f){
  return this.each(function(){
    $("<img />").appendTo(this).each(function(){
            this.src = src;
            this.onload = f;
    });
  });
}

On a défini une nouvelle fonction, image(), dans la liste des fonctions de jQuery ($.fn) ; cette fonction prend en argument l’adresse de notre image (src) et une fonction à lancer en fin de chargement (f).

Elle prend alors l’objet auquel elle s’applique (un objet jQuery, donc une liste de nœuds du DOM), et pour chacun : crée un tag <img />, l’ajoute à l’élément, et règles ses attributs src et onload.

Il n’y a plus alors qu’à appeler notre fonction image() par un :

$(document).ready(function() {
 $("#container").image(
   "http://jquery.com/images/hat.gif",
   function(){
     alert("Image OK !");
   }
 );
});

Autrement dit, quand la page est prête, on sélectionne l’objet id="container", et on lui applique .image().

Répondre à cet article

3 Messages de forum


Derniers commentaires

Nouveautés sur le Web