Hvordan vise bilde med JavaScript

JavaScript er et dynamisk skriptspråk som brukes til dynamiske effekter på nettsteder. Dessuten inneholder websidene bilder ved hjelp av HTML -taggen. Noen ganger tar siden lang tid å laste, slik at utviklere foretrekker å legge til bilder ved hjelp av JavaScript -bildekoder som lastes dynamisk og tar mindre tid å laste inn eller vise på et klikk.

Denne artikkelen vil beskrive prosessen for å vise bilder ved hjelp av JavaScript.

Hvordan vise et bilde med JavaScript?

For å vise bilder med JavaScript, bruk "CreateElement ()”Metode for å lage en HTML -elementnode. For å oppnå dette tar det “img”Som en parameter.

Syntaks
For å lage en elementnode, bruk den gitte syntaks:

dokument.CreateElement (type)

Eksempel 1: Vis bilde med JavaScript
I dette eksemplet er det ikke nødvendig å legge til en HTML -kode fordi vi vil legge til et bilde ved hjelp av JavaScript. For dette formålet, skriv ut følgende kode i JavaScript -filen:

funksjon DisplayImage (SRC, bredde, høyde)
var img = dokument.CreateElement ("IMG");
img.src = src;
img.bredde = bredde;
img.høyde = høyde;
dokument.kropp.appendchild (img);

I ovennevnte kodebit:

• Definere en funksjon “DisplayImage ()”Med bildekilde“src”,“bredde”, Og“høyde”Som en parameter.
• Legg til en bildekode eller element i JavaScript ved å bruke “CreateElement ()”Metode.
• Angi bildeegenskapene som kilde, bredde og høyde på et bilde.
• Legg deretter bildet til HTML -kroppen ved å bruke “dokument.kropp.vedlegg ()”Metode.

Nå, ring funksjonen “DisplayImage ()”Og passer høyden, bredden og kilden til et bilde som et argument:

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

Produksjon

I neste eksempel, sjekk ut hvordan du viser et bilde på et knappeklikk.

Eksempel 2: Vis bilde på knappeklikk med CSS -klasse
Dette eksemplet handler om hvordan en CSS -klasse kan brukes til å vise et bilde i JavaScript og hvordan bildet vil vises når knappen er klikket. Først oppretter vi en knapp i en HTML -fil som kaller "DisplayImage ()”Funksjon når knappen er klikket:

Klikk

La oss lage en CSS -klasse “ImageFeatures”For å angi bildeattributtene som“lengde”, Og“bredde”Av et bilde:

.ImageFeatures

Bredde: 320;
Høyde: 250;

Definere en funksjon “DisplayImage ()”Med en enkelt parameter SRC. Legg deretter til et bildeelement ved hjelp av CreateElement () -metoden, og angi kilden til et bilde. Nå, legg til klassen "ImageFeatures”For å sette bildeattributtene ved å bruke“Klasseliste.Legg til()”Metode. Til slutt, legg til bildekoden i et dokument ved å bruke "dokument.kropp.vedlegg ()”Metode:

funksjon DisplayImage (SRC)
var img = dokument.CreateElement ("IMG");
img.src = src;
img.Klasseliste.Legg til ("ImageFeatures");
dokument.kropp.appendchild (img);

Som du kan se, vises bildet på knappeklikk uten forsinkelse:

Vi har vist bildet ved hjelp av JavaScript.

Konklusjon

For å vise et bilde med JavaScript, bruk "CreateElement ()”Metode for å lage en bildekode. Mer spesifikt brukes createElement () -metoden for å lage en elementnode. I denne artikkelen beskrev vi prosessen for å vise bilder ved hjelp av JavaScript.