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.