Come visualizzare l'immagine con JavaScript

JavaScript è un linguaggio di scripting dinamico utilizzato per effetti dinamici sui siti Web. Inoltre, le pagine Web contengono immagini utilizzando il tag HTML. A volte la pagina richiede molto tempo per caricare, quindi gli sviluppatori preferiscono aggiungere immagini utilizzando i tag di immagine JavaScript che si caricano in modo dinamico e impiegano meno tempo per caricare o visualizzare su qualsiasi clic.

Questo articolo descriverà il processo per la visualizzazione di immagini utilizzando JavaScript.

Come visualizzare un'immagine con JavaScript?

Per la visualizzazione di immagini con JavaScript, usa il “createElement ()"Metodo per creare un nodo elemento HTML. Per raggiungere questo obiettivo, ci vuole "img"Come parametro.

Sintassi
Per la creazione di un nodo elemento, utilizzare la sintassi data:

documento.CreateElement (tipo)

Esempio 1: visualizzare l'immagine con JavaScript
In questo esempio, non è necessario aggiungere un codice HTML perché aggiungeremo un'immagine usando JavaScript. A tale scopo, scrivi il seguente codice nel file JavaScript:

Funzione DisplayImage (src, larghezza, altezza)
var img = documento.createElement ("IMG");
img.src = src;
img.larghezza = larghezza;
img.altezza = altezza;
documento.corpo.AppendChild (IMG);

Nel frammento di codice sopra:

• Definire una funzione "DisplayImage ()"Con la fonte di immagine"src","larghezza", E "altezza"Come parametro.
• Aggiungi un tag immagine o un elemento in JavaScript utilizzando il "createElement ()" metodo.
• Imposta le proprietà dell'immagine come la sorgente, la larghezza e l'altezza di un'immagine.
• Quindi, aggiungi l'immagine al corpo HTML usando "documento.corpo.appendChild ()" metodo.

Ora, chiama la funzione "DisplayImage ()"E passare l'altezza, la larghezza e la fonte di un'immagine come argomento:

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

Produzione

Nell'esempio successivo, controlla come mostrare un'immagine su un pulsante Click.

Esempio 2: visualizzare l'immagine sul pulsante Clicca con la classe CSS
Questo esempio riguarda il modo in cui una classe CSS può essere utilizzata per visualizzare un'immagine in JavaScript e come verrà visualizzata l'immagine quando si fa clic sul pulsante. Innanzitutto, creeremo un pulsante in un file HTML che chiama "DisplayImage ()"Funzione Quando si fa clic sul pulsante:

Clic

Creiamo una classe CSS "feature di immagini"Per impostare gli attributi dell'immagine come"lunghezza", E "larghezza"Di un'immagine:

.feature di immagini

larghezza: 320;
altezza: 250;

Definire una funzione "DisplayImage ()"Con un singolo parametro SRC. Quindi, aggiungi un elemento immagine usando il metodo createElement () e imposta la fonte di un'immagine. Ora, aggiungi la classe "feature di immagini"Per l'impostazione degli attributi dell'immagine usando il"classlist.aggiungere()" metodo. Infine, aggiungi il tag immagine in un documento usando "documento.corpo.appendChild ()" metodo:

funzione DisplayImage (src)
var img = documento.createElement ("IMG");
img.src = src;
img.classlist.Aggiungi ("ImageFatures");
documento.corpo.AppendChild (IMG);

Come puoi vedere, l'immagine viene visualizzata sul clic del pulsante senza alcun ritardo:

Abbiamo visualizzato l'immagine con l'aiuto di JavaScript.

Conclusione

Per visualizzare un'immagine con JavaScript, usa il “createElement ()"Metodo per la creazione di un tag immagine. Più specificamente, il metodo createElement () viene utilizzato per creare un nodo elemento. In questo articolo, abbiamo descritto il processo per la visualizzazione di immagini utilizzando JavaScript.