JavaScript-onload

Samenvatting: in deze tutorial leert u hoe u de load-gebeurtenis moet afhandelen die wordt geactiveerd op de document-, afbeelding- en scriptelementen in JavaScript.

De laadgebeurtenis van het venster

Voor het window -object wordt de load -gebeurtenis geactiveerd wanneer de hele webpagina (HTML) is volledig geladen, inclusief alle afhankelijke bronnen zoals JavaScript-bestanden, CSS-bestanden en afbeeldingen.

Om de load -gebeurtenis af te handelen, registreer je een gebeurtenisluisteraar die de addEventListener() -methode gebruikt:

Code language: JavaScript (javascript)

Of de onload eigenschap van het window object:

Code language: JavaScript (javascript)

Als u een verouderd systeem onderhoudt, kan het zijn dat de load gebeurtenishandler is als volgt geregistreerd in het body-element van het HTML-document:

Het is een goede gewoonte om de methode om de onload gebeurtenishandler toe te wijzen waar mogelijk.

De laadgebeurtenis van de afbeelding

De load gebeurtenis komt ook voor op afbeeldingen. Om de load -gebeurtenis op de afbeeldingen af te handelen, kunt u de addEventListener() -methode van de afbeeldingselementen gebruiken.

De in het volgende voorbeeld wordt de load gebeurtenishandler gebruikt om te bepalen of een afbeelding, die in de DOM-structuur bestaat, volledig is geladen:

U kunt een onload gebeurtenishandler die rechtstreeks het onload -attribuut van het <img> -element gebruikt, zoals dit:

Code language: HTML, XML (xml)

Als u dynamisch een afbeeldingselement maakt, kunt u een onload gebeurtenishandler toewijzen voordat u de eigenschap als volgt:

Hoe het werkt:

• Maak eerst een afbeeldingselement nadat het document volledig is geladen door de code in de event handler van de load event van het venster.
• Ten tweede, wijs vervolgens de onload event handler toe aan de afbeelding.
• Ten derde, voeg de afbeelding toe naar het document.
• Wijs ten slotte een afbeeldings-URL toe aan het src -attribuut. De afbeelding wordt naar het element gedownload zodra de src-eigenschap is ingesteld.

De load-gebeurtenis van het script

De <script> -element ondersteunt ook de load -gebeurtenis die enigszins verschilt van de standaardmanieren.

Met de load -gebeurtenis van het script kunt u om te controleren of een JavaScript-bestand volledig is geladen.

In tegenstelling tot de afbeeldingen, begint de webbrowser JavaScript-bestanden pas te downloaden nadat de src -eigenschap is toegewezen en de <script> element is toegevoegd aan het document.

De volgende code laadt het app.js bestand nadat de pagina is volledig geladen. Het wijst een onload gebeurtenishandler toe om te controleren of de app.js volledig is geladen.

Samenvatting