JavaScript onload (Magyar)
Összefoglaló: ebben az oktatóanyagban megtudhatja, hogyan kell kezelni a JavaScript dokumentumban, képen és szkript elemeken induló betöltési eseményt.
Az ablak betöltési eseménye
A window
objektum esetén a load
esemény elindul, amikor a az egész weboldal (HTML) teljesen betöltődött, beleértve az összes függő erőforrást, például a JavaScript-fájlokat, a CSS-fájlokat és a képeket.
A load
esemény kezeléséhez regisztrálnia kell eseményfigyelő a addEventListener()
módszer használatával:
Code language: JavaScript (javascript)
Vagy a onload
tulajdonság az window
objektumhoz:
Code language: JavaScript (javascript)
Ha régi rendszert tart fenn, akkor ezt megtalálhatja a load
eseménykezelő a HTML dokumentum törzs elemébe be van jegyezve, így:
Jó gyakorlat a módszer az onload
eseménykezelő hozzárendeléséhez, amikor csak lehetséges.
A kép betöltési eseménye
A load
esemény a képeken is előfordul. A képeken található load
esemény kezeléséhez használhatja a képelemek addEventListener()
módszerét.
A a következő példa a load
eseménykezelőt használja annak megállapítására, hogy a DOM-fában lévő kép teljesen betöltődött-e:
Hozzárendelhet egy onload
eseménykezelő közvetlenül a onload
attribútum használatával a <img>
elemhez hasonlóan:
Code language: HTML, XML (xml)
Ha dinamikusan hoz létre egy képelemet, akkor hozzárendelhet egy onload
eseménykezelőt a tulajdonság az alábbiak szerint:
Hogyan működik:
- Először hozzon létre egy kép elemet, miután a dokumentum teljesen betöltődött, helyezze be a kódot a az ablak betöltési eseményének eseménykezelője.
- Másodszor, majd rendelje hozzá a képhez az
onload
eseménykezelőt. - Harmadszor adja hozzá a képet a dokumentumhoz.
- Végül rendeljen kép URL-t a
src
attribútumhoz. A kép az elemre kerül, amint az src tulajdonság be van állítva.
A szkript betöltési eseménye
A <script>
elem támogatja a load
eseményt is, amely kissé eltér a szokásos módoktól.
A szkript load
eseménye lehetővé teszi annak ellenőrzése, hogy egy JavaScript-fájl betöltődött-e.
A képekkel ellentétben a webböngésző csak a src
tulajdonság hozzárendelése és a <script>
elem hozzá lett adva a dokumentumhoz.
A következő kód az oldal betöltése után tölti be a app.js
fájlt. teljesen megrakva. Hozzárendel egy onload
eseménykezelőt annak ellenőrzéséhez, hogy az app.js
betöltődött-e.