Sto eseguendo uno script esterno, usando un <script>interno <head>.
Ora poiché lo script viene eseguito prima che la pagina sia stata caricata, non posso accedere <body>, tra le altre cose. Vorrei eseguire alcuni JavaScript dopo che il documento è stato "caricato" (HTML completamente scaricato e in-RAM). Ci sono eventi a cui posso agganciare quando viene eseguito il mio script, che verranno attivati al caricamento della pagina?
Risposte:
Queste soluzioni funzioneranno:
<body onload="script();">o
document.onload = function ...o anche
window.onload = function ...Nota che l'ultima opzione è un modo migliore di procedere poiché è discreta ed è considerata più standard .
document.onload=non è invadente en.wikipedia.org/wiki/Unobtrusive_JavaScript
Modo ragionevolmente portatile e non framework di impostare lo script per eseguire una funzione da eseguire al momento del caricamento:
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;
}
}Questo evento viene generato quando il documento HTML iniziale è stato completamente caricato e analizzato , senza attendere il di fogli di stile, immagini e sottoframe. In questa fase è possibile ottimizzare a livello di programmazione il caricamento di immagini e CSS in base alla velocità del dispositivo dell'utente o della larghezza di banda.
Esegue dopo il caricamento di DOM (prima di img e css):
document.addEventListener("DOMContentLoaded", function(){
//....
});Nota: JavaScript sincrono mette in pausa l'analisi del DOM. Se desideri che il DOM venga analizzato il più rapidamente possibile dopo che l'utente ha richiesto la pagina, puoi farlo trasformare il tuo JavaScript in modo asincrono e ottimizzare il caricamento dei fogli di stile
Un evento molto diverso, load , dovrebbe essere usato solo per rilevare a pagina a pieno carico . È un errore incredibilmente popolare utilizzare il caricamento in cui DOMContentLoaded sarebbe molto più appropriato, quindi sii cauto.
Esce dopo che tutto è stato caricato e analizzato:
window.addEventListener("load", function(){
// ....
});Risorse MDN:
https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded https://developer.mozilla.org/en-US/docs/Web/Events/load
Elenco MDN di tutti gli eventi:
window.onload = ...pensare che il mio script avrebbe atteso che tutto fosse completamente scaricato prima di essere eseguito ma sembra window.onloadeffettivamente comportarsi come document.addEventListener("DOMContentLoaded", ..., mentre in window.addEventListener("load", ...realtà aspetta che tutto sia scaricato completamente. Avrei pensato che window.onloaddovrebbe essere equivalente window.addEventListener("load", ...piuttosto che document.addEventListener("DOMContentLoaded", ...?? Ho ottenuto lo stesso risultato in Chrome e FF.
È possibile inserire un attributo "onload" all'interno del corpo
...<body onload="myFunction()">...O se stai usando jQuery, puoi farlo
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })Spero che risponda alla tua domanda.
Nota che $ (window) .load verrà eseguito dopo il rendering del documento sulla tua pagina.
Se gli script sono caricati all'interno <head>del documento, è possibile utilizzare ildefer attributo nel tag script.
Esempio:
<script src="demo_defer.js" defer></script>Da https://developer.mozilla.org :
differire
Questo attributo booleano è impostato per indicare a un browser che lo script deve essere eseguito dopo che il documento è stato analizzato, ma prima di avviare DOMContentLoaded.
Questo attributo non deve essere utilizzato se l'attributo src è assente (ovvero per gli script inline), in questo caso non avrebbe alcun effetto.
Per ottenere un effetto simile per gli script inseriti dinamicamente, utilizzare async = false. Gli script con l'attributo defer verranno eseguiti nell'ordine in cui compaiono nel documento.
Ecco uno script basato sul caricamento js posticipato dopo il caricamento della pagina,
<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 lo metto?
Incolla il codice nel tuo HTML appena prima del
</body>tag (nella parte inferiore del tuo file HTML).
Che cosa fa?
Questo codice dice attendere il caricamento dell'intero documento, quindi caricare il file esterno
deferredfunctions.js.
Ecco un esempio del codice sopra - Defer Rendering di JS
Ho scritto questo sulla base del caricamento posticipato del concetto di google pagepage javascript e anche di questo articolo Rinvia caricamento javascript
Guarda l'aggancio document.onloado in jQuery $(document).load(...).
Fiddle di lavoro su<body onload="myFunction()">
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function myFunction(){
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html><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
Se stai usando jQuery,
$(function() {...});
è equivalente a
$(document).ready(function () { })
o un'altra scorciatoia:
$().ready(function () { })
Vedi Su quale evento si attiva JQuery $ function ()? e https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}guarda qui: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
A volte trovo su pagine più complesse che non tutti gli elementi sono stati caricati dal time window.onload viene attivato. In tal caso, aggiungere setTimeout prima che la funzione per ritardare sia un momento. 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 verrà chiamato dopo che la pagina è stata caricata. Il tuo codice nello script è racchiuso da aFunction() { }.
<body onload="myFunction()">Questo codice funziona bene.
Ma il window.onloadmetodo ha varie dipendenze. Quindi potrebbe non funzionare tutto il tempo.
Usando la libreria YUI (lo adoro):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Portatile e bello! Tuttavia, se non usi YUI per altre cose (vedi il suo documento) direi che non vale la pena usarlo.
NB: 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>Esiste un'ottima documentazione su come rilevare se il documento è stato caricato utilizzando Javascript o Jquery.
Utilizzando Javascript nativo questo può essere ottenuto
if (document.readyState === "complete") {
init();
}Questo può essere fatto anche all'interno dell'intervallo
var interval = setInterval(function() {
if(document.readyState === 'complete') {
clearInterval(interval);
init();
}
}, 100);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;
}Uso di Jquery Per verificare solo se DOM è pronto
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});Per verificare se tutte le risorse sono state caricate, utilizzare window.load
$( window ).load(function() {
console.log( "window loaded" );
});Usa questo codice con la libreria jQuery, funzionerebbe perfettamente.
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready () funziona meglio per me.
$(document).ready(function(){ ... });.load () funzionerà, ma non attenderà il caricamento della pagina.
jQuery(window).load(function () { ... });Non funziona per me, interrompe lo script in-line successivo. Sto anche usando jQuery 3.2.1 insieme ad altre forcelle jQuery.
Per nascondere la sovrapposizione di caricamento dei miei siti Web, utilizzo quanto segue:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>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");
}
});$(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 = ...Come dice Daniel, puoi usare document.onload.
I vari framework javascript (jQuery, Mootools, ecc.) Utilizzano un evento personalizzato "domready", che suppongo debba essere più efficace. Se stai sviluppando con JavaScript, ti consiglio vivamente di sfruttare un framework, aumentano notevolmente la tua produttività.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Si consiglia di utilizzare l' asnycattributo per il tag dello script che aiuta 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>usa la funzione onload di esecuzione automatica
window.onload = function (){
/* statements */
}(); onloadgestori utilizzando questo approccio. Invece, dovresti aggiungere listener.