L'objet Image

Parent Previous Next



L'objet Image



Comme dit dans l'introduction, la manipulation des images se fait par le biais de l'objet Image, qui possède plusieurs propriétés permettant d'obtenir divers renseignements sur l'image actuellement instanciée.


Le constructeur


Le constructeur de l'objet Image ne prend aucun argument en paramètre, cela a au moins le mérite d'être simple :

var myImg = new Image();


Propriétés


Voici une liste non exhaustive des propriétés de l'objet Image. Consultez la documentation pour une liste complète (mais pas forcément fiable).

Nom de la propriété

Contient…

width

Contient la largeur originale de l'image. Vous pouvez redéfinir cette propriété pour modifier la taille de l'image.

height

Contient la hauteur originale de l'image. Vous pouvez redéfinir cette propriété pour modifier la taille de l'image.

src

Cette propriété vous sert à spécifier l'adresse (absolue ou relative) de l'image. Une fois que cette propriété est spécifiée, l'image commence immédiatement à être chargée.


Il existe une propriété nommée complete qui permet de savoir si l'image a été entièrement chargée. Cependant, cette propriété n'est pas standard (sauf en HTML5) et son implémentation est assez hasardeuse, parfois cette propriété fonctionne, mais la plupart du temps on obtient une valeur erronée. Nous en déconseillons donc l'utilisation.


Événements


L'objet Image ne possède qu'un seul événement nommé load, il est très utile, notamment lorsque l'on souhaite créer un script de type Lightbox, car il vous permet de savoir quand une image est chargée.


Son utilisation se fait comme tout événement :

var myImg = new Image();

 

myImg.src = 'adresse_de_mon_image';

 

myImg.onload = function() { // Il est bien entendu possible d'utiliser le DOM-2

    // Etc.

};


Cependant, ce code risque de causer un problème majeur : notre événement pourrait ne jamais se déclencher ! Pourquoi donc ? Eh bien, parce que nous avons spécifié l'adresse de notre image avant même d'avoir spécifié notre événement, ce qui fait que si l'image a été trop rapidement chargée, l'événementload se sera déclenché avant même que nous n'ayons eu le temps de le modifier.


Il existe une solution toute simple pour pallier ce problème, il suffit de spécifier l'adresse de notre imageaprès avoir modifié notre événement :

var myImg = new Image();

 

myImg.onload = function() { // Étape 1 : on modifie notre événement

    // Etc.

};

 

myImg.src = 'adresse_de_mon_image'; // Étape 2 : on spécifie l'adresse de notre image


Ainsi, vous n'aurez aucun problème : votre événement sera toujours déclenché !


Particularités


L'objet Image est un peu spécial, dans le sens où vous pouvez l'ajouter à votre arbre DOM comme vous le feriez avec la valeur retournée par la méthode document.createElement(). Ce comportement est spécial et ne peut se révéler utile que dans de très rares cas d'application, mais il est quand même préférable de vous en parler afin que vous connaissiez l'astuce :

var myImg = new Image();

myImg.src = 'adresse_de_mon_image';

 

document.body.appendChild(myImg); // L'image est ajoutée au DOM


Créé avec HelpNDoc Personal Edition: Écrire des livres électronique Kindle

Site à deux balles