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.