Hvordan du bruker image onload -arrangement i JavaScript

I JavaScript, bildet "på Last”Hendelsen oppstår når bildet er lastet med suksess på en webside. Denne funksjonen kan brukes når vi trenger å laste inn bilder på websidene våre for å gjøre dem attraktive. Image onload -arrangement brukes også i utviklingen av nettsteder som viser produktenees bilder, logoer og bannere.

Denne artikkelen vil fremheve Image Onload -hendelsen ved hjelp av JavaScript.

Hvordan du bruker bilde av javascript -arrangement?

Du kan bruke følgende metoder for å utføre Image Onload Event Operation i JavaScript:

• QuerySelector ()
• Brukerdefinert funksjon

Vi vil nå gå gjennom hver av de nevnte tilnærmingene en etter en!

Metode 1: Bruk Image Onload -hendelsen i JavaScript med dokument.QuerySelector ()

“dokument.QuerySelector ()”Metode brukes først og fremst for å returnere det første elementet som samsvarer med en bestemt velger i dokumentet. For eksempel kan den brukes til å definere en hendelse for å få tilgang til et bilde fra HTML -filen.

Det undergitte eksemplet vil bruke dokumentet.querySelector () -metode for å definere et bilde ved lasthendelse.

Eksempel

Først vil vi legge til bildekilden "src”I HTML -filen:

Gå nå til JavaScript -filen og ring "AddEventListener ()”Metode med vindusobjektet. Denne metoden vil bli brukt til å legge til en hendelseslytter for å laste inn ønsket bilde ved hjelp av "dokument.QuerySelector ()”Metode. Etter det, legg til et popup-varsel med den oppgitte meldingen:

vindu.AddEventListener ("Last", hendelse =>
var img = dokument.QuerySelector ('IMG');
Varsel ("Bilde lastes med suksess");
);

Til slutt, spesifiser kilden til JavaScript -filen i hodet eller kroppskoden:

Åpning av den gitte HTML -filen vil vise følgende utgang:

Etter å ha lastet det valgte bildet, vil følgende varslingsboks også dukke opp med en melding:

Metode 2: Bruk Image Onload-hendelsen i JavaScript med brukerdefinert funksjon

En brukerdefinert funksjon kan også brukes til bildet på lastingsprosessen, som er tilgjengelig i “Html”Fil via“på Last”. Denne funksjonen vil returnere bildestatusen i en varslingsboks.

Sjekk ut følgende eksempel for å forstå det uttalte konseptet.

Eksempel

Først vil vi definere en “ImageOnLoad ()”Funksjon og vis statusen til bildet som skal lastes inn via varslingsboks:

funksjon imageOnload ()
Varsel ("Bilde lastes med suksess");

Deretter vil vi legge til banen til bildet som må lastes ned og ringe de definerte "ImageOnLoad ()”Funksjon som“på Last" begivenhet. Videre vil vi også spesifisere kilden til JavaScript -filen i HTML -filen:

LT; IMG SRC = "E: \ Job Tekniske artikler \ Image.Png "onload =" imageonload () ">

Produksjon

Vi har gitt forskjellige metoder for å bruke Image Onload -hendelsen i JavaScript.

Konklusjon

For å bruke Image Onload -hendelsen i JavaScript, kan du bruke dokumentet.querySelector () -metode eller brukerdefinert funksjon. I den første tilnærmingen kalles AddEvEntListener () -metoden med vindusobjektet som brukes til å legge til en hendelseslytter til dokumentet.QuerySelector () -metode. For den andre tilnærmingen kan det opprettes et brukerdefinert objekt, som er tilgjengelig i HTML-filen via Onload-hendelsen. Denne oppskrivningen diskuterte metoden for å bruke en JavaScript-hendelse.