Javascript funkcijas Kā palaist funkciju lapas ielādes laikā? Vairāku funkciju palaišana ielādes DOMContentLoaded un skriptos

Ja jūs jau vairāk vai mazāk zināt JavaScript, tad droši vien esat dzirdējuši par ielādēšanas notikumu apstrādātāju, ko sauc par ielādi. Šis notikums tiek aktivizēts tieši, kad lapa tiek ielādēta. Un ļoti bieži, kad lapa tiek ielādēta, ir jāizpilda kāda funkcija. Bet ko darīt, ja jums ir jāpalaiž vairākas JavaScript funkcijas? Patiesībā šo jautājumu uzdeva viens no vietnes lietotājiem. Tāpēc šajā rakstā es rakstīšu par vairāku funkciju palaišanu ielādes laikā.

Risinājums ir patiešām triviāls, vienkārši palaidiet funkciju, kurā tiek palaistas visas nepieciešamās citas funkcijas:

funkcija a() (
b()
c();
}
funkcija b() (
alert ("Funkcija b() sākta");
}
funkcija c() (
alert ("Funkcija c() ir sākta");
}

Atverot šo lapu (nav tik svarīgas lietas kā html tags vai, piemēram, lapas virsraksts un kodējums, lai atvieglotu koda izpratni), redzēsiet, kā b() un c () funkcijas darbojas, kad lapa tiek ielādēta.

Es vēlos palaist funkciju, kad lapa ir ielādēta, bet nevēlos to izmantot programmā .

Man ir skripts, kas darbojas, ja to inicializēju, piemēram:

Funkcijas kodsAdrese() ( // kods )

Bet es gribu to palaist bez un esmu izmēģinājis daudzas lietas, piemēram:

Window.onload = codeAddress;

Bet tas nedarbojas.

Tātad, kā to aktivizēt lapas ielādes laikā?

window.onload = function() (... utt. nav lieliska atbilde.

Tas, iespējams, darbosies, taču tas arī izjauks visas citas funkcijas, kas jau ir saistītas ar šo notikumu. Vai arī, ja kāda cita funkcija uztver šo notikumu pēc jūsu, tā pārtrauks. Tātad jūs varat pavadīt daudzas stundas vēlāk, mēģinot noskaidrot, kāpēc kaut kas, kas darbojas, vairs nepastāv.

Drošāka atbilde šeit:

If(window.attachEvent) ( window.attachEvent("ielādēt", jūsuFunkcijasNosaukums); ) else ( if(window.onload) ( var curronload = window.onload; var newonload = function(evt) ( curronload(evt); yourFunctionName( evt); ); window.onload = newonload; ) else ( window.onload = yourFunctionName; ) )

Kaut kādu kodu izmantoju, aizmirsu, kur to atradu, lai piešķirtu autoram godu.

Funkcija my_function() ( // kāds kods, kuru vēlos palaist pēc lapas ielādes ) if (window.attachEvent) (window.attachEvent("ielādēt", mana_funkcija);) else if (window.addEventListener) (window.addEventListener("load ", mana_funkcija, false);) else (document.addEventListener("load", my_function, false);)

Ceru tas palīdzēs :)

Tā vietā, lai izmantotu jQuery vai window.onload, vietējais JavaScript ir ieviesis dažas lieliskas funkcijas kopš jQuery izlaišanas. Visām mūsdienu pārlūkprogrammām tagad ir sava DOM gatavības funkcija, neizmantojot jQuery bibliotēku.

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

window.onload = codeAddress; vajadzētu darboties - un pilns kods ir:

Testa funkcijas codeAddress() ( alert("ok"); ) window.onload = codeAddress;

Testa funkcijas codeAddress() ( alert("ok"); )

Apskatiet skriptu domReady, kas ļauj konfigurēt vairākas funkcijas, lai tās darbotos, kad tiek ielādēts DOM. Būtībā tas ir tas, ko Dom ir gatavs darīt daudzās populārās JavaScript bibliotēkās, taču tas ir viegls, un to var pieņemt un pievienot ārējā skripta faila sākumā.

Lietošanas piemērs

// pievienot atsauci uz domReady skriptu vai ievietot // skripta saturu pirms šeit funkcija codeAddress() ( ) domReady(codeAddress);

Šodien es vēlos runāt par vienu problēmu, kas bieži rodas cilvēkiem, kuri sāk apgūt Javascript.

Viņi mēģina mijiedarboties ar HTML elementiem lapā, kas atrodas zemāk kodā nekā pats skripts. Attiecīgi skripts jau ir ielādēts, bet elements, ar kuru jums būs jāsadarbojas, vēl nav. Šī iemesla dēļ nekas nedarbosies.

Javascript valodas īpatnība ir tāda, ka tās kods tiek izpildīts secīgi, rindiņu pa rindiņai, kā tie ir rakstīti pirmkodā.

Šeit ir piemērs:

Dokuments bez nosaukuma

CSS noteikums (fona krāsa: dzeltens) netiks piemērots elementam ar ID #block, jo līniju

$("#block").css("fona krāsa", "dzeltens");

Tiks izpildīts pirms html rindas ielādes:

Ko darīt, ja mums ir jāizpilda kods vai funkcija tikai pēc tam, kad viss dokuments ir pilnībā ielādēts?

Es vēlos runāt par trim veidiem, kā jūs varat to izdarīt.

1 veids. Izmantojot Jquery bibliotēku.

Visbiežāk es to izmantoju pats, tas ir vienkāršākais un ērtākais risinājums, taču tam ir jāpievieno Jquery bibliotēka.

Lūk, kā tiks pārveidots iepriekšējais kods, ja izmantosim šādu metodi.

#bloks (platums: 100 pikseļi; augstums: 100 pikseļi; apmale: 1px ciets # ccc;) $(document).ready (funkcija())( $("#block").css("fona krāsa", "dzeltens" ) ; )); Dokuments bez nosaukuma

2. metode. Izmantojot ķermeņa elementu un onload atribūtu.

#block (platums: 100 pikseļi; augstums: 100 pikseļi; apmale: 1px solid #ccc;) funkcija funonload() ( $("#block").css("fona krāsa", "dzeltens"); ) Dokuments bez nosaukuma

3 ceļi. Logu objekta un tā ielādes rekvizīta izmantošana.

#block (platums:100px; augstums:100px; apmale:1px solid #ccc;) funkcija funonload() ( $("#block").css("fona krāsa", "dzeltens"); ) window.onload = funonload; Dokuments bez nosaukuma

Izvēlieties metodi, kas vislabāk atbilst jūsu situācijai, un izmantojiet to praksē.