121

Sto usando il seguente codice per eseguire alcune istruzioni dopo il caricamento della pagina.

 <script type="text/javascript">
    window.onload = function () { 

        newInvite();
        document.ag.src="b.jpg";
    }
</script>

Ma questo codice non funziona correttamente. La funzione viene chiamata anche se si stanno caricando alcune immagini o elementi. Quello che voglio è chiamare la funzione che la pagina viene caricata completamente.

javascript html image

— Neeraj Kumar
fonte

1

Potresti aggiungere una demo su JSFiddle.net ?

— Some Guy

2

Potresti usare jQuery? Se è così, prova$(window).load()

— Matt Hintzke

Sì, potresti spiegare esattamente cosa non funziona correttamente? Stai ricevendo un errore, o forse stai chiamando una alertfunzione prima che la finestra venga ridisegnata (facendo sembrare che sia chiamata prima del caricamento)? Il codice sembra a posto e costringere gli utenti a scaricare librerie di grandi dimensioni probabilmente non risolverà questo problema né renderà più facile la diagnosi.

— Jeffrey Sweeney

doxdesk.com/img/updates/20091116-so-large.gif

— Jeffrey Sweeney

Quando dico che non funziona, intendo che la funzione viene attivata anche se vengono caricate alcune immagini.

— Neeraj Kumar

166

questo potrebbe funzionare per te:

document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);

o se ti consola con jquery,

$(document).ready(function(){
// your code
});

$(document).ready()viene attivato su DOMContentLoaded, ma questo evento non viene generato in modo coerente tra i browser. Questo è il motivo per cui jQuery molto probabilmente implementerà alcune soluzioni alternative pesanti per supportare tutti i browser. E questo renderà molto difficile simulare "esattamente" il comportamento usando un semplice Javascript (ma non impossibile ovviamente).

come suggerito da Jeffrey Sweeney e J Torres, penso che sia meglio avere una setTimeoutfunzione, prima di attivare la funzione come di seguito:

setTimeout(function(){
 //your code here
}, 3000);

— Shreedhar
fonte

12

jQuery readynon farà ciò che l'OP ha richiesto. readysi attiva quando viene caricato il DOM, non dopo il caricamento degli elementi. loadsi attiverà al termine del caricamento / rendering degli elementi.

— Jaime Torres

Sembra che l'OP voglia caricare completamente tutti gli elementi, non solo l'HTML.

— Jeffrey Sweeney

3

@shreedhar o potrebbe usare lo strumento giusto per il lavoro ( load).

— Jaime Torres

14

setTimeoutè una cattiva idea. Si basa sul caricamento della pagina in meno di 3 secondi ( an secondi a seconda del valore scelto). Se il caricamento richiede più tempo, non funzionerà e se la pagina viene caricata più velocemente, dovrà attendere senza motivo.

— JJJ

1

@ChristianMatthew sua useCapture Se è vero, useCapture indica che l'utente lo desidera di avviare la cattura. Dopo aver avviato l'acquisizione, tutti gli eventi del tipo specificato verranno inviati al listener registrato prima di essere inviati a qualsiasi EventTarget sottostante nell'albero DOM. Gli eventi che stanno ribollendo verso l'alto attraverso l'albero non attiveranno un ascoltatore designato per utilizzare la cattura. Vedere Eventi DOM Livello 3 per una spiegazione dettagliata.

— Shreedhar

52

JavaScript

document.addEventListener('readystatechange', event => { 

    // When HTML/DOM elements are ready:
    if (event.target.readyState === "interactive") {   //does same as:  ..addEventListener("DOMContentLoaded"..
        alert("hi 1");
    }

    // When window loaded ( external resources are loaded too- `css`,`src`, etc...) 
    if (event.target.readyState === "complete") {
        alert("hi 2");
    }
});

lo stesso per jQuery:

$(document).ready(function() {   //same as: $(function() { 
     alert("hi 1");
});

$(window).load(function() {
     alert("hi 2");
});

NOTA: - Non utilizzare il markup seguente (perché sovrascrive altre dichiarazioni dello stesso tipo):

document.onreadystatechange = ...

— T.Todua
fonte

1

è supportato questo browser incrociato

— bluejayke

Questa risposta è molto migliore delle altre. +1

— Xydez

Molto bene! Grazie.

— Farzin Kanzi

34

Se puoi usare jQuery, guarda load . È quindi possibile impostare la funzione in modo che venga eseguita al termine del caricamento dell'elemento.

Ad esempio, considera una pagina con un'immagine semplice:

<img src="book.png" alt="Book" id="book" />

Il gestore di eventi può essere associato all'immagine:

$('#book').load(function() {
  // Handler for .load() called.
});

Se hai bisogno di caricare tutti gli elementi nella finestra corrente, puoi usare

$(window).load(function () {
  // run code
});

— Jaime Torres
fonte

1

Il loadmetodo jQuery non associa semplicemente una funzione all'evento di caricamento utilizzando Javascript? In che modo questo sarebbe diverso da quello che sta già facendo il PO?

— Alex Kalicki

@AlexKalicki AFAIK non sarebbe diverso, tranne per il fatto che jQuery potrebbe utilizzare addEventListeneranziché associare la onloadproprietà DOM0 .

— Alnitak

@AlexKalicki Non posso dire che utilizzi la stessa identica funzionalità, ma secondo la documentazione, jQuery garantisce che tutti gli elementi, comprese le immagini, vengano caricati prima che venga attivato. Tenderei a credere che ci sarebbe una logica aggiuntiva in atto se questo è il caso, e non ho motivo di non credere alla documentazione, anche se non mi sono mai imbattuto nello stesso problema segnalato dall'OP.

— Jaime Torres

4

A partire da JQuery v1.8, .load è deprecato. fonte

— Adonis K. Kakoulidis

1

La migliore soluzione in assoluto per la domanda.

— Roberto Sepúlveda Bravo

29

Sono un po 'confuso sul fatto che cosa intendi per caricamento della pagina completato, "caricamento DOM" o "caricamento del contenuto"? In una pagina html il caricamento può generare eventi dopo due eventi di tipo.

Caricamento DOM: che garantisce il caricamento dell'intero albero DOM dall'inizio alla fine. Ma non assicurarti di caricare il contenuto di riferimento. Supponiamo di aver aggiunto le immagini tramite i imgtag, quindi questo evento garantisce che tutte le immagini imgcaricate ma non le immagini siano state caricate correttamente o meno. Per ottenere questo evento dovresti scrivere in questo modo:
```
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
```
O usando jQuery:
```
$(document).ready(function(){
// your code
});
```
Dopo DOM e caricamento del contenuto: che indicano anche il caricamento del DOM e del contenuto. Garantirà non solo il imgtag, ma anche il caricamento di tutte le immagini o altri contenuti relativi. Per ottenere questo evento dovresti scrivere in questo modo:
```
window.addEventListener('load', function() {...})
```
O usando jQuery:
```
$(window).on('load', function() {
 console.log('All assets are loaded')
})
```

— Hanif
fonte

2

Questa è l'unica risposta qui che fornisce una soluzione non jQuery per l'OP, con una chiara spiegazione

— Velojet

@Hanif DOMContentLoadedevent handler non sembra fare nulla per me, ma lo loadfa.

— Brandon Benefield

1

Gli ultimi due esempi non hanno bisogno del punto e virgola alla fine delle righe?

— R. Navega

11

Se vuoi chiamare una funzione js nella tua pagina html usa l'evento onload. L'evento onload si verifica quando il programma utente finisce di caricare una finestra o tutti i frame all'interno di un FRAMESET. Questo attributo può essere utilizzato con gli elementi BODY e FRAMESET.

<body onload="callFunction();">
....
</body>

— user2361682
fonte

7

In questo modo puoi gestire entrambi i casi, se la pagina è già caricata o meno:

document.onreadystatechange = function(){
    if (document.readyState === "complete") {
       myFunction();
    }
    else {
       window.onload = function () {
          myFunction();
       };
    };
}

— tsveti_iko
fonte

3

In alternativa puoi provare di seguito.

$(window).bind("load", function() { 
// code here });

Funziona in ogni caso. Questo si attiverà solo quando viene caricata l'intera pagina.

— Ganesh Ram Ravi
fonte

3

Per quanto ne so la cosa migliore è usare

window.addEventListener('load', function() {
    console.log('All assets loaded')
});

La risposta n. 1 dell'utilizzo DOMContentLoadeddell'evento è un passo indietro poiché il DOM verrà caricato prima del caricamento di tutte le risorse.

Altre risposte consigliano a setTimeoutcui mi opporrei fortemente poiché è completamente soggettiva alle prestazioni del dispositivo del client e alla velocità della connessione di rete. Se qualcuno si trova su una rete lenta e / o ha una cpu lenta, il caricamento di una pagina potrebbe richiedere da diverse a dozzine di secondi, quindi non è possibile prevedere quanto temposetTimeout sarà necessario.

Per quanto riguarda readystatechange, si attiva ogni volta readyStateche cambia che secondo MDN sarà ancora prima loaddell'evento.

Completare

Lo stato indica che l'evento di caricamento sta per attivarsi.

— Ryan Walker
fonte

2

window.onload = () => {
  // run in onload
  setTimeout(() => {
    // onload finished.
    // and execute some code here like stat performance.
  }, 10)
}

— tvrcgo
fonte

2

Sebbene questo frammento di codice possa essere la soluzione, includere una spiegazione aiuta davvero a migliorare la qualità del tuo post. Ricorda che stai rispondendo alla domanda per i lettori in futuro e quelle persone potrebbero non conoscere i motivi del tuo suggerimento sul codice.

— yivi

@yivi se non è un messaggio automatico: è abbastanza ovvio per chiunque cosa significhi quel codice, soprattutto perché ci sono commenti nel codice ..

— bluejayke

1

Se non stai utilizzando alcun framework JS, questo progetto è il modo migliore per ottenere lo stato dom ready, con compatibilità cross browser

https://github.com/ded/domready/blob/master/ready.js

— Olivier Refalo
fonte

1

Se stai già utilizzando jQuery, potresti provare questo:

$(window).bind("load", function() {
   // code here
});

— santosh
fonte

4

Inutile senza spiegazioni.

— Daniel W.

1

Posso dirti che la migliore risposta che ho trovato è mettere uno script "driver" subito dopo il </body>comando. È la più semplice e, probabilmente, più universale di alcune delle soluzioni sopra.

Il piano: sulla mia pagina c'è una tabella. Scrivo la pagina con la tabella nel browser, quindi la ordino con JS. L'utente può ricorrere facendo clic sulle intestazioni di colonna.

Dopo che la tabella è terminata con un </tbody>comando e il corpo è terminato, utilizzo la riga seguente per invocare il JS di ordinamento per ordinare la tabella per colonna 3. Ho ricevuto lo script di ordinamento dal web in modo che non venga riprodotto qui. Almeno per il prossimo anno, puoi vederlo in funzione, incluso il JS, su static29.ILikeTheInternet.com. Fare clic su "qui" nella parte inferiore della pagina. Ciò farà apparire un'altra pagina con la tabella e gli script. Puoi vederlo inserire i dati e poi ordinarli rapidamente. Devo accelerare un po ', ma ora le basi sono lì.

</tbody></body><script type='text/javascript'>sortNum(3);</script></html>

MakerMikey

— Micheal Morrow
fonte

0

Prova questo jQuery :

$(function() {
 // Handler for .ready() called.
});

— djserva
fonte

1

jQuery readynon farà ciò che l'OP ha richiesto. readysi attiva quando il DOM viene caricato, non dopo il caricamento degli elementi. loadsi attiverà al termine del caricamento / rendering degli elementi.

— Jaime Torres

0

chiamare una funzione dopo il completamento del caricamento della pagina impostato il timeout

setTimeout(function() {
   var val = $('.GridStyle tr:nth-child(2) td:nth-child(4)').text();
	for(var i, j = 0; i = ddl2.options[j]; j++) {
		if(i.text == val) {      
			ddl2.selectedIndex = i.index;
			break;
		}
	} 
}, 1000);

Espandi lo snippet

— MH
fonte

0

Tendo ad utilizzare il seguente schema per verificare il completamento del caricamento del documento. La funzione restituisce una promessa (se è necessario supportare IE, includere il polyfill ) che si risolve una volta completato il caricamento del documento. Utilizza setIntervalsotto perché un'implementazione simile con setTimeoutpotrebbe comportare uno stack molto profondo.

function getDocReadyPromise()
{
  function promiseDocReady(resolve)
  {
    function checkDocReady()
    {
      if (document.readyState === "complete")
      {
        clearInterval(intervalDocReady);
        resolve();
      }
    }
    var intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Ovviamente, se non devi supportare IE:

const getDocReadyPromise = () =>
{
  const promiseDocReady = (resolve) =>
  {
    const checkDocReady = () =>
      ((document.readyState === "complete") && (clearInterval(intervalDocReady) || resolve()));
    let intervalDocReady = setInterval(checkDocReady, 10);
  }
  return new Promise(promiseDocReady);
}

Con quella funzione, puoi fare quanto segue:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

— Paul Rowe
fonte

-1

Sto usando componenti web, quindi funziona per me:

document.addEventListener('WebComponentsReady', function() {
       document.querySelector('your-element').show();
});

— ufukomer
fonte

-3

Metti il tuo script dopo il completamento del tag body ... funziona ...

— Kalyan
fonte

eseguire la funzione dopo il caricamento completo della pagina

JavaScript

lo stesso per jQuery: