Js

evento di caricamento della finestra per capire

Window Load Event Understand



Alcuni tag script JavaScript sulla pagina spesso devono essere in grado di funzionare solo dopo che il documento è stato caricato, potrebbe causare la situazione non può ottenere l'oggetto, al fine di evitare il verificarsi di situazioni simili, è possibile utilizzare i seguenti due modi:

(1) Il codice dello script nella parte inferiore della pagina, il codice dello script in fase di esecuzione, è possibile garantire che gli oggetti da manipolare abbiano terminato il caricamento.



(2). Per eseguire il codice dello script tramite window.onload.



Per la castagna:



Aspetto del browser:



le impostazioni del colore div # bg non sono riuscite, indicando che il codice del tag dello script viene eseguito prima del rendering div # bg, non ha trovato l'oggetto div, quindi la console stampa null

Modifica il codice per utilizzare l'evento di caricamento:

Il browser mostra normale:

Informazioni sull'associazione del gestore eventi window.onload:

La funzione predefinita dell'evento window.onload viene eseguita solo l'ultimo limite, ad esempio,

window.onload = funcA

window.onload = funcB ;

Quindi, quando la finestra viene caricata, solo l'implementazione di funcB

Se si desidera eseguire più funzioni nella finestra caricata, è possibile possedere una funzione di impacchettamento

Il file Js può essere aggiunto alla funzione, ad es. addLoadEvent (test1) addLoadEvent (test2), quando la finestra viene caricata, avrà eseguito test1, test2

Jquery utilizzato quando è possibile eseguire una pluralità di funzioni dopo il completamento della finestra di caricamento

Entrambe le funzioni verranno eseguite al termine del caricamento della finestra

Confronta window.onload e $ (document) .ready ()

Dopo tutto, window.onload deve attendere che il contenuto della pagina sia caricato (comprese le immagini) per funzionare

$ (Document) .ready () viene eseguito dopo che tutto il disegno della struttura DOM della pagina è stato completato, gli elementi DOM associati potrebbero non aver completato il caricamento, ma tutti gli elementi di una pagina web sono accessibili su jQuery equivalente a DOMContentLoaded

$ (documento) .load ()

Va notato che l'uso del metodo $ (document) .ready () per registrare l'evento, a causa dell'elemento associato, il file potrebbe non essere scaricato, come l'HTML e le immagini relative al download è completo, ma l'immagine no caricamento completato, immagine altamente accessibile in questo momento e tali attributi potrebbero non essere la larghezza effettiva,

Quindi puoi usare il metodo $ (document) .load (), se la funzione da associare all'oggetto finestra, sarà nel trigger caricato (finestre, frame, oggetti, immagini, ecc.), Se l'associazione sull'elemento, entrerà dopo aver caricato il contenuto dell'elemento trigger, equivalente a Javascript

Il window.onload = function () {}