JavaScript che viene eseguito dopo il caricamento della pagina

https://stackoverflow.com/questions/807878

03-07-2019
|

Domanda

Sto eseguendo uno script esterno, utilizzando un <script> all'interno <head>.

Ora, dal momento che lo script viene eseguito prima la pagina è stata caricata, non riesco ad accedere all' <body>, tra le altre cose.Vorrei eseguire un po ' di JavaScript, dopo che il documento è stato "caricato" (HTML completamente scaricato e RAM).Ci sono eventi che posso agganciare quando il mio script viene eseguito, che avranno attivato il caricamento della pagina?

Soluzione

Queste soluzioni funziona:

<body onload="script();">

document.onload = function ...

o anche

window.onload = function ...

Nota che l'ultima opzione è un modo migliore per andare poiché è discreta ed è considerato più standard.

Altri suggerimenti

Ragionevolmente portatile, camere non-framework modo di avere il vostro script di impostare una funzione per eseguire in fase di carico:

if(window.attachEvent) {
    window.attachEvent('onload', yourFunctionName);
} else {
    if(window.onload) {
        var curronload = window.onload;
        var newonload = function(evt) {
            curronload(evt);
            yourFunctionName(evt);
        };
        window.onload = newonload;
    } else {
        window.onload = yourFunctionName;
    }
}

Tenete a mente che quando si carica la pagina ha più di una fase.Btw, questo è puro JavaScript

"DOMContentLoaded"

Questo evento viene generato quando il iniziale documento HTML è stato caricato completamente e analizzato, senza aspettare , per i fogli di stile, immagini, e cassonetto per completare il caricamento.In questa fase si potrebbe a livello di programmazione di ottimizzare il caricamento delle immagini e css in base all'utente o dispositivo di velocità di larghezza di banda.

Exectues dopo il DOM è caricato (prima di img e css):

document.addEventListener("DOMContentLoaded", function(){
    //....
});

Nota:Sincrono JavaScript pause analisi del DOM.Se si desidera che il DOM per ottenere analizzato il più velocemente possibile dopo che l'utente ha richiesto la pagina, si potrebbe trasforma il tuo JavaScript asincrono e ottimizzare il caricamento di fogli di stile

"carico"

Un evento diverso, carico, dovrebbe essere utilizzato solo per rilevare una completamente caricato pagina.Si tratta di un incredibilmente popolari errore di usare carico di cui DOMContentLoaded sarebbe molto più appropriato, in modo da essere cauti.

Exectues dopo tutto è stato caricato e analizzato:

window.addEventListener("load", function(){
    // ....
});

MDN Risorse:

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load

MDN elenco di tutti gli eventi:

https://developer.mozilla.org/en-US/docs/Web/Events

Si può mettere un "onload" attributo all'interno del corpo

...<body onload="myFunction()">...

O se si utilizza jQuery, si può fare

$(document).ready(function(){ /*code here*/ }) 

or 

$(window).load(function(){ /*code here*/ })

Spero di rispondere alla tua domanda.

Nota che $(window).il carico verrà eseguito dopo che il documento viene eseguito il rendering della pagina.

Se gli script sono caricati all'interno del <head> del documento, è possibile utilizzare il defer attributo nel tag script.

Esempio:

<script src="demo_defer.js" defer></script>

Da https://developer.mozilla.org:

rinviare

Questo attributo Booleano che indica al browser che lo script è pensato per essere eseguito dopo che il documento è stato analizzato, ma prima di cottura DOMContentLoaded.

Questo attributo non deve essere utilizzato se il src attributo è assente (cioèper inline scripts), in questo caso sarebbe non hanno alcun effetto.

Per ottenere un effetto simile dinamicamente inserito script async=false invece.Script con l'attributo di rinvio verrà eseguito in l'ordine in cui compaiono nel documento.

Ecco uno script basato su differita js caricamento dopo che la pagina è caricata,

<script type="text/javascript">
  function downloadJSAtOnload() {
      var element = document.createElement("script");
      element.src = "deferredfunctions.js";
      document.body.appendChild(element);
  }

  if (window.addEventListener)
      window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
      window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

Dove posso fare questo?

Incollare il codice nel tuo HTML, appena prima di </body> tag (vicino al fondo del file HTML).

Che cosa fa?

Questo codice dice di attendere per l'intero documento per caricare, caricare il file esterno deferredfunctions.js.

Ecco un esempio di codice di cui sopra - Rinviare il Rendering di JS

Ho scritto questo sulla base di defered il caricamento di javascript pagespeed di google concetto e anche provenienti da questo articolo Rinviare il caricamento di javascript

Guarda aggancio document.onload o in jQuery $(document).load(...).

document.onreadystatechange = function(){
     if(document.readyState === 'complete'){
         /*code here*/
     }
}

guarda qui: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs. 85).aspx

Miglior metodo consigliato da Google anche.:)

<script type="text/javascript">
  function downloadJSAtOnload() {
   var element = document.createElement("script");
   element.src = "defer.js";
   document.body.appendChild(element);
  }
  if (window.addEventListener)
   window.addEventListener("load", downloadJSAtOnload, false);
  else if (window.attachEvent)
   window.attachEvent("onload", downloadJSAtOnload);
  else window.onload = downloadJSAtOnload;
</script>

http://www.feedthebot.com/pagespeed/defer-loading-javascript.html

Lavoro Violino

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
   alert("Page is loaded");
}
</script>
</head>

<body onload="myFunction()">
<h1>Hello World!</h1>
</body>    
</html>

Se si utilizza jQuery,

$(function() {...});

è equivalente a

$(document).ready(function () { })

Vedere Quale evento fa JQuery funzione $() sul fuoco?

<body onload="myFunction()">

Questo codice funziona bene.

Ma window.onload metodo di varie dipendenze.Quindi potrebbe non funzionare per tutto il tempo.

Trovo a volte sulle pagine più complesse che non tutti gli elementi hanno caricato dalla finestra di tempo.onload viene licenziato.Se questo è il caso, aggiungere setTimeout prima la funzione di ritardo è un attimo.Non è elegante ma è un semplice trucco che rende bene.

window.onload = function(){ doSomethingCool(); };

diventa...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };

Basta definire <body onload="aFunction()"> che sarà chiamato dopo che la pagina è stata caricata.Il codice dello script è di racchiuso aFunction() { }.

$(window).on("carico", function(){ ...});

.ready() funziona meglio per me.

$(document).ready(function(){ ... });

.load() funziona, ma non aspettare che la pagina viene caricata.

jQuery(window).load(function () { ... });

Non funziona per me, rompe l'script inline.Sto anche utilizzando jQuery 3.2.1 insieme con alcuni altri jQuery forcelle.

Per nascondere i miei siti web di carico di sovrapposizione, io uso il seguente:

<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>

Utilizzando il YUI biblioteca (Mi piace):

YAHOO.util.Event.onDOMReady(function(){
    //your code
});

Portatile e bello!Tuttavia, se non si utilizza YUI per altre cose (vedi doc) direi che non vale la pena di usarlo.

N. B.:per utilizzare questo codice è necessario importare 2 script

<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>

C'è una buona documentazione su Come rilevare se il documento è stato caricato utilizzando Javascript o Jquery.

Utilizzando il nativo Javascript che questo obiettivo può essere raggiunto

if (document.readyState === "complete") {
 init();
 }

Questo può essere fatto anche all'interno di questo intervallo

var interval = setInterval(function() {
    if(document.readyState === 'complete') {
        clearInterval(interval);
        init();
    }    
}, 100);

Per Esempio Mozilla

switch (document.readyState) {
  case "loading":
    // The document is still loading.
    break;
  case "interactive":
    // The document has finished loading. We can now access the DOM elements.
    var span = document.createElement("span");
    span.textContent = "A <span> element.";
    document.body.appendChild(span);
    break;
  case "complete":
    // The page is fully loaded.
    console.log("Page is loaded completely");
    break;
}

Utilizzando Jquery Per controllare solo se DOM è pronto

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "ready!" );
});

Per verificare se tutte le risorse sono caricati utilizzare la finestra.carico

 $( window ).load(function() {
        console.log( "window loaded" );
    });

Usa questo codice con la libreria jQuery, potrebbe funzionare perfettamente bene.

$(window).bind("load", function() { 

  // your javascript event

});

Come dice Daniele, si potrebbe utilizzare il documento.onload.

I vari framework javascript hwoever (jQuery, Mootools, etc.) l'uso di un evento personalizzato 'domready', che immagino deve essere più efficace.Se sei in via di sviluppo con javascript, mi raccomando sfruttando un quadro, essi aumentare notevolmente la vostra produttività.

Il mio consiglio e di utilizzare asnyc attributi del tag script thats aiutare a caricare gli script esterni dopo il caricamento della pagina

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>

<script type="text/javascript">
$(window).bind("load", function() { 

// your javascript event here

});
</script>

uso l'esecuzione funzione onload

window.onload = function (){
    /* statements */
}();

Autorizzato sotto: CC-BY-SA insieme a attribuzione

Non affiliato a StackOverflow