Devo eseguire un codice JavaScript quando la pagina è stata caricata completamente. Questo include cose come le immagini.
So che puoi controllare se il DOM è pronto, ma non so se è lo stesso di quando la pagina è completamente caricata.
Risposte:
Questo si chiama load. È arrivato waaaaay prima che DOM ready fosse in giro, e DOM ready è stato effettivamente creato per il motivo esatto che ha loadatteso sulle immagini.
window.addEventListener('load', function () {
alert("It's loaded!")
})window.onloadviene chiamato quando ogni componente / risorsa della pagina (cioè * includendo * immagini). Ho ragione?
onloadattende tutte le risorse che fanno parte del documento. Ciò esclude, ovviamente, le richieste create dinamicamente che non fanno parte del documento stesso, ad esempio una richiesta AJAX.
addEventListener("load", function(){... })invece di sovrascrivere la onloadproprietà.
Di solito è possibile utilizzare window.onload, ma è possibile notare che i browser recenti non window.onloadsi attivano quando si utilizzano i pulsanti di cronologia avanti / indietro.
Alcune persone suggeriscono strane contorsioni per aggirare questo problema, ma in realtà se si crea un window.onunloadgestore (anche uno che non fa nulla), questo comportamento di memorizzazione nella cache verrà disabilitato in tutti i browser. L' MDC documenta questa "caratteristica" abbastanza bene, ma per qualche ragione ci sono ancora persone che usano setIntervale altri strani hack.
Alcune versioni di Opera hanno un bug che può essere risolto aggiungendo quanto segue da qualche parte nella tua pagina:
<script>history.navigationMode = 'compatible';</script>Se stai solo cercando di ottenere una funzione javascript chiamata una volta per visualizzazione (e non necessariamente dopo il completamento del caricamento del DOM), puoi fare qualcosa del genere:
<img src="javascript:location.href='javascript:yourFunction();';">Ad esempio, utilizzo questo trucco per precaricare un file molto grande nella cache in una schermata di caricamento:
<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">Per completezza, potresti anche voler associarlo a DOMContentLoaded, che ora è ampiamente supportato
document.addEventListener("DOMContentLoaded", function(event){
// your code here
});Maggiori informazioni: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
$.readyho pensato che avesse dato un buon contributo. Btw. addEventListenerUserei il metodo anche per l' loadevento, poiché ti permette di avere più callback:window.addEventListener("load", function(event){ // your code here });
Prova questo Esegui solo dopo il caricamento dell'intera pagina
Di Javascript
window.onload = function(){
// code goes here
};Di Jquery
$(window).bind("load", function() {
// code goes here
});$(window)mi fa pensare che sarebbe jquery - giusto? O sto confondendo qualche sintassi javascript? (Sono nuovo di JS).
$(document).ready();quando jQuery è disponibile?
Prova questo codice
document.onreadystatechange = function () {
if (document.readyState == "interactive") {
initApplication();
}
}visitare https://developer.mozilla.org/en-US/docs/DOM/document.readyState per maggiori dettagli
"interactive"non è completamente caricato. "complete"è completamente caricato
Javascript utilizzando l' onLoad()evento, attenderà il caricamento della pagina prima dell'esecuzione.
<body onload="somecode();" >Se si utilizza la funzione di documento pronto del framework jQuery, il codice verrà caricato non appena viene caricato il DOM e prima che vengano caricati i contenuti della pagina:
$(document).ready(function() {
// jQuery code goes here
});Potresti voler usare window.onload , poiché i documenti indicano che non è stato attivato fino a quando sia il DOM è pronto e TUTTI gli altri asset nella pagina (immagini, ecc.) Vengono caricati.
Ed ecco un modo per farlo con PrototypeJS :
Event.observe(window, 'load', function(event) {
// Do stuff
});Nei browser moderni con javascript moderno (> = 2015) è possibile aggiungere type="module"al tag dello script e tutto ciò che si trova all'interno di quello script verrà eseguito dopo il caricamento dell'intera pagina. per esempio:
<script type="module">
alert("runs after") // Whole page loads before this line execute
</script>
<script>
alert("runs before")
</script>anche i browser più vecchi capiranno l' nomoduleattributo. Qualcosa come questo:
<script nomodule>
alert("tuns after")
</script>Per ulteriori informazioni è possibile visitare javascript.info .
onloadusi $(window).load(jQuery):$(window).load(function() {
//code
});La proprietà onload del mixin GlobalEventHandlers è un gestore eventi per l'evento load di un oggetto Window, XMLHttpRequest, elemento, ecc., Che viene generato quando la risorsa è stata caricata.
Quindi praticamente javascript ha già il metodo onload sulla finestra che viene eseguita quale pagina è stata caricata completamente, comprese le immagini ...
Puoi fare qualcosa:
var spinner = true;
window.onload = function() {
//whatever you like to do now, for example hide the spinner in this case
spinner = false;
};Aggiornamento 2019: questa è stata la risposta che ha funzionato per me. Poiché avevo bisogno di più richieste Ajax per attivare e restituire i dati prima di contare le voci dell'elenco.
$(document).ajaxComplete(function(){
alert("Everything is ready now!");
});