Comment afficher l'image avec JavaScript

JavaScript est un langage de script dynamique utilisé pour les effets dynamiques sur les sites Web. De plus, les pages Web contiennent des images à l'aide de la balise HTML. Parfois, la page prend beaucoup de temps à charger, donc les développeurs préfèrent ajouter des images à l'aide de balises d'image JavaScript qui se chargent dynamiquement et prennent moins de temps à charger ou à afficher sur n'importe quel clic.

Cet article décrira le processus pour afficher des images à l'aide de JavaScript.

Comment afficher une image avec JavaScript?

Pour afficher des images avec JavaScript, utilisez le «CreateElement ()”Méthode pour créer un nœud d'élément HTML. Pour y parvenir, il faut «IMG«En tant que paramètre.

Syntaxe
Pour créer un nœud d'élément, utilisez la syntaxe donnée:

document.CreateElement (type)

Exemple 1: Afficher l'image avec JavaScript
Dans cet exemple, il n'est pas nécessaire d'ajouter un code HTML car nous ajouterons une image à l'aide de JavaScript. À cette fin, rédigez le code suivant dans le fichier JavaScript:

Fonction affichageImage (src, largeur, hauteur)
var img = document.CreateElement ("IMG");
IMG.src = src;
IMG.largeur = largeur;
IMG.hauteur = hauteur;
document.corps.appenchild (IMG);

Dans l'extrait de code ci-dessus:

• Définir une fonction "afficher l'image()"Avec source d'image"SRC","largeur", et "hauteur«En tant que paramètre.
• Ajoutez une balise d'image ou un élément dans JavaScript en utilisant le «CreateElement ()" méthode.
• Définissez les propriétés de l'image comme la source, la largeur et la hauteur d'une image.
• Ensuite, ajoutez l'image au corps HTML en utilisant le «document.corps.APPENDCHILD ()" méthode.

Maintenant, appelez la fonction "afficher l'image()»Et passez la hauteur, la largeur et la source d'une image comme argument:

DisplayImage ('2.JPG ', 320, 250);

Sortir

Dans l'exemple suivant, consultez comment afficher une image sur un bouton cliquer.

Exemple 2: Afficher l'image sur le bouton cliquer avec la classe CSS
Cet exemple concerne la façon dont une classe CSS peut être utilisée pour afficher une image en JavaScript et comment l'image apparaîtra lorsque le bouton est cliqué. Tout d'abord, nous créerons un bouton dans un fichier html qui appelle le «afficher l'image()”Fonction lorsque le bouton est cliqué:

Cliquez sur

Créons une classe CSS "ImageFeatures«Pour définir les attributs d'image tels que«longueur", et "largeur«D'une image:

.ImageFeatures

Largeur: 320;
hauteur: 250;

Définir une fonction "afficher l'image()”Avec un seul paramètre SRC. Ensuite, ajoutez un élément d'image à l'aide de la méthode CreateElement () et définissez la source d'une image. Maintenant, ajoutez la classe "ImageFeatures«Pour définir les attributs d'image à l'aide du«liste de classe.ajouter()" méthode. Enfin, ajoutez la balise d'image dans un document en utilisant le «document.corps.APPENDCHILD ()" méthode:

fonction displawImage (src)
var img = document.CreateElement ("IMG");
IMG.src = src;
IMG.liste de classe.Add ("ImageFeatures");
document.corps.appenchild (IMG);

Comme vous pouvez le voir, l'image s'affiche sur le bouton CLIC sans délai:

Nous avons affiché l'image à l'aide de JavaScript.

Conclusion

Pour afficher une image avec JavaScript, utilisez le «CreateElement ()”Méthode pour créer une balise d'image. Plus précisément, la méthode CreateElement () est utilisée pour créer un nœud d'élément. Dans cet article, nous avons décrit le processus pour afficher des images à l'aide de JavaScript.