Funktsiooni kutsumine JavaScripti lehe laadimisel. Mitme funktsiooni käivitamine allalaadimisel

Kui sa juba enam-vähem tead JavaScript, siis olete ilmselt sündmuste käitlejast kuulnud koormus, mida nimetatakse laadimine. See sündmus käivitub kohe pärast lehe laadimist. Ja väga sageli tuleb lehe laadimisel käivitada mõni funktsioon. Aga mis siis, kui vaja käivitada mitu JavaScripti funktsiooni? Tegelikult esitas selle küsimuse üks saidi kasutajatest. Seetõttu umbes mitme funktsiooni käivitamine sisselaadimisel, kirjutan selles artiklis.

Lahendus on tõesti triviaalne, lihtsalt käivitage funktsioon, mis käivitab kõik muud vajalikud funktsioonid:

Kui avatud sellel lehel(pole olemas nii olulisi asju nagu sildid html või näiteks lehe pealkiri ja kodeering, et koodist arusaamist lihtsustada), näed, kuidas funktsioonid lehe laadimisel töötavad b() Ja c().

nuppu klõpsa lehe laadimisel (4)

Ma tahan käivitada funktsiooni, kui leht on laaditud, kuid ma ei taha seda kasutada .

Mul on skript, mis käivitub, kui selle sisse lülitan , näiteks:

Funktsiooni koodAadress() ( // kood )

Aga ma tahan seda ilma joosta ja ma olen proovinud palju asju, näiteks:

Window.onload = codeAddress;

Aga see ei tööta.

Niisiis, kuidas seda lehe laadimisel käivitada?

window.onload = function() ( ...etc ei ole hea vastus.

See tõenäoliselt töötab, kuid see rikub ka kõik muud funktsioonid, mis selle sündmusega juba haakuvad. Või kui mõni teine funktsioon haakub selle sündmuse külge pärast teie oma, läheb see katki. Seega võite kulutada mitu tundi hiljem, püüdes välja mõelda, miks midagi, mis töötab, enam ei eksisteeri.

Täpsem vastus siin:

If(window.attachEvent) ( window.attachEvent("laadimine", teieFunktsiooniNimi); ) else ( if(window.onload) ( var curronload = window.onload; var newonload = function(evt) ( curronload(evt); teieFunktsiooniNimi( evt); ); window.onload = newonload; ) else ( window.onload = teieFunktsiooninimi; ) )

Mõned koodid, mida ma kasutasin, unustasin, kust ma selle leidsin, et anda autorile tunnustust.

Funktsioon my_function() ( // mis iganes koodi ma tahan käivitada pärast lehe laadimist ) if (window.attachEvent) (window.attachEvent("onload", my_function);) else if (window.addEventListener) (window.addEventListener("load ", minu_funktsioon, vale);) else (document.addEventListener("load", minu_funktsioon, false);)

Loodan, et see aitab :)

Selle asemel, et kasutada faili jQuery või window.onload, on native JavaScript kasutusele võtnud mõned suurepärased funktsioonid alates jQuery väljaandmisest. Kõigil on kaasaegsed brauserid nüüd on enda funktsioon DOM on valmis ilma jQuery teeki kasutamata.

Document.addEventListener("DOMContentLoaded", function() ( alert("Valmis!"); ), false);

window.onload = codeAddress; - peaks töötama ja täielik kood on:

katsetada

Heitke pilk skriptile domReady, mis võimaldab teil seadistada mõned funktsioonid, mida DOM-i laadimisel käivitada. Põhimõtteliselt on see see, mida Dom on paljudes populaarsetes JavaScripti teekides valmis tegema, kuid see on kerge ja seda saab võtta ja lisada rakenduse alguses. väline fail stsenaarium.

Kasutusnäide

// lisage viide skriptile domReady või asetage // skripti sisu enne siia funktsioon codeAddress() ( ) domReady(codeAddress);

Täna tahan rääkida ühest probleemist, mis Javascripti õppimist alustavatel inimestel sageli tekib.

Nad püüavad suhelda lehel HTML-i elementidega, mille kood on skripti enda koodist madalam. Seetõttu on skript juba laaditud, kuid element, millega peate suhtlema, pole veel laaditud. Sel põhjusel ei tööta midagi.

Omapära Javascripti keel selles, et selle kood täidetakse järjestikku, rida-realt, nagu need on lähtekoodis kirjutatud.

Siin on näide:

Pealkirjata dokument

CSS-reeglit (taustavärv:kollane) ID-ga #block elemendile ei rakendata, kuna rida

$("#block").css("taustavärv", "kollane");

Käivitatakse enne html-rea laadimist:

Mis siis, kui peame koodi või funktsiooni käivitama alles pärast seda, kui kogu dokument on täielikult laaditud?

Tahan rääkida kolmest viisist, kuidas seda teha.

1 viis. Jquery teegi kasutamine.

Kõige sagedamini kasutan seda ise, kõige lihtsam ja mugavam lahendus, kuid see nõuab Jquery teegi ühendust.

Siin on, kuidas eelmine kood teisendatakse, kui kasutame järgmist meetodit.

Pealkirjata dokument