Como fazer o JavaScript ser executado após o carregamento da página?

737

Estou executando um script externo, usando um <script>interior <head>.

Agora, como o script é executado antes do carregamento da página, não consigo acessar <body>, entre outras coisas. Eu gostaria de executar algum JavaScript depois que o documento foi "carregado" (HTML totalmente baixado e na RAM). Existem eventos nos quais eu possa me conectar quando o script for executado, que serão acionados no carregamento da página?

javascript html dom-events pageload O Flash
fonte

Respostas:

837

Essas soluções funcionarão:

<body onload="script();">

ou

document.onload = function ...

ou mesmo

window.onload = function ...

Observe que a última opção é o melhor caminho a percorrer, pois é discreta e é considerada mais padrão .

marcgg
fonte
5
Qual é a diferença entre <body onload = "script ();"> e document.onload = function ...?
Mentoliptus
11
@mentoliptus: document.onload=não é invasivo pt.wikipedia.org/wiki/Unobtrusive_JavaScript
marcgg
3
script no html ... não não não $ (function () {code here}); <- javascript.js pode ser colocado na cabeça e será carregado após o DOM
21
O @gerdi OP não mencionou nada sobre o jQuery. Também dei uma opção discreta na minha resposta.
Marcgg
1
document.onload não funcionou para mim. Encontrei este post com o mesmo problema stackoverflow.com/questions/5135638/… . Não parece document.onload é uma opção.
Spottedmahn
196

Maneira razoavelmente portátil e sem estrutura de fazer com que seu script defina uma função para executar no tempo de carregamento:

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;
    }
}
caos
fonte
10
+1 por postar quase exatamente o que eu tinha que criar há 6 meses. Um código como esse pode ser necessário se outras estruturas e códigos sobre os quais você não tem controle estiverem adicionando eventos onload e você desejar também, sem eliminar os outros eventos onload. Incluí minha implementação como uma função e exigia var newonload = function (evt) {curronload (evt); newOnload (evt); } porque, por algum motivo, a estrutura que estou usando exige que um evento seja passado para o evento onload.
29530 Grant
6
Acabei de descobrir no teste que o código, como escrito, resulta em manipuladores sendo acionados em uma ordem indefinida quando anexados com attachEvent (). Se a execução da ordem do manipulador for importante, convém deixar de fora a ramificação window.attachEvent.
Grant Wagner
Portanto, isso adicionará essa função como uma função ADICIONAL para executar o OnLoad, correto? (em vez de substituir um evento onload existente)
argila Nichols
@ClayNichols: Correto.
caos
2
Boa solução, mas agora desatualizada: developer.mozilla.org/en-US/docs/Web/API/EventTarget/…
Renan
192

Lembre-se de que o carregamento da página possui mais de um estágio. Btw, isso é JavaScript puro

"DOMContentLoaded"

Este evento é acionado quando o documento HTML inicial tiver sido completamente carregado e analisado , sem aguardar que as folhas de estilo, imagens e sub-quadros terminem de carregar. Nesta fase, você pode otimizar programaticamente o carregamento de imagens e css com base no dispositivo do usuário ou na velocidade da largura de banda.

Executa após o carregamento do DOM (antes de img e css): 

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

Nota: JavaScript síncrono pausa a análise do DOM. Se você deseja que o DOM seja analisado o mais rápido possível depois que o usuário solicitou a página, você pode ativar o JavaScript assíncrono e otimizar o carregamento de folhas de estilo

"carga"

Um evento muito diferente, load , deve ser usado apenas para detectar uma página totalmente carregada . É um erro incrivelmente popular usar o load em que DOMContentLoaded seria muito mais apropriado, portanto, tenha cuidado.

Exectues depois que tudo é carregado e analisado: 

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

Recursos MDN:

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

Lista MDN de todos os eventos:

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

DevWL
fonte
1
@ Pedro certeza que isso está sozinho provavelmente melhor se no fundo de seus arquivos javascript para que ele executa última
arodebaugh
O Javascript pausa a renderização do DOM para a melhor maneira: colocá-lo na parte inferior da página ou carregar o javascript assíncrono no cabeçalho.
DevWL
Esta é a resposta mais completa. onload é depois, mas as pessoas não percebem isso no começo.
precisa saber é
1
Re javascript assíncrono : para esclarecer, existem duas opções para scripts que não são executados imediatamente. Desses, o defer é geralmente preferível ao assíncrono - porque o adiamento não interrompe a análise / renderização de html - e quando é executado, é garantido que o DOM esteja pronto. Carregue JavaScript com eficiência com adiamento e assíncrono .
Home
+1 Tentei window.onload = ...pensar que meu script esperaria até que tudo fosse baixado completamente antes da execução, mas parece que window.onloadrealmente se comporta document.addEventListener("DOMContentLoaded", ..., enquanto o que window.addEventListener("load", ...realmente espera para que tudo seja baixado completamente. Eu teria pensado que window.onloaddeveria ser equivalente ao window.addEventListener("load", ...invés de document.addEventListener("DOMContentLoaded", ...?? Obtive o mesmo resultado no Chrome e no FF.
wkille 24/01
121

Você pode colocar um atributo "onload" dentro do corpo

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

Ou, se você estiver usando jQuery, poderá fazer 

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

or 

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

Espero que responda sua pergunta.

Observe que o $ (window) .load será executado depois que o documento for renderizado em sua página.

Nordes
fonte
65

Se os scripts forem carregados dentro <head>do documento, é possível usar o deferatributo na tag script.

Exemplo:

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

De https://developer.mozilla.org :

adiar

Este atributo booleano é definido para indicar a um navegador que o script deve ser executado após a análise do documento, mas antes de disparar o DOMContentLoaded.

Este atributo não deve ser usado se o atributo src estiver ausente (ou seja, para scripts embutidos), nesse caso, não terá efeito.

Para obter um efeito semelhante para scripts inseridos dinamicamente, use async = false. Os scripts com o atributo defer serão executados na ordem em que aparecem no documento.

Daniel Price
fonte
Eu amo esta solução, porque não precisa de nenhum código javascript, mas só precisa de um atributo html <3
sarkiroka
27

Aqui está um script com base no carregamento adiado de js após o carregamento da página,

<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>

Onde coloco isso?

Cole o código no seu HTML logo antes da </body>tag (na parte inferior do seu arquivo HTML).

O que isso faz?

Este código diz que aguarde o carregamento do documento inteiro e carregue o arquivo externo deferredfunctions.js.

Aqui está um exemplo do código acima - Adiar a renderização de JS

Eu escrevi isso com base no carregamento adiado do conceito de google pagespeed do javascript e também originário deste artigo Adiar o carregamento do javascript

Por sorte
fonte
20

Veja enganchar document.onloadou no jQuery $(document).load(...).

Daniel A. White
fonte
Este evento é confiável? (Navegador Cruz .. + IE6 FF2 + etc)
theflash
1
Sim, este é o DOM padrão entre navegadores.
30511 Daniel A. White
16
Na verdade, é window.onload que é mais padrão, não document.onload. AFAIK
Peter Bailey
11

Violino de trabalho em<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>
Aamir Shahzad
fonte
10 
<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

Frankey
fonte
7

Às vezes, em páginas mais complexas, acho que nem todos os elementos foram carregados pela janela de tempo. O onload é acionado. Se for esse o caso, adicione setTimeout antes que sua função demore um momento. Não é elegante, mas é um hack simples que se processa bem.

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

torna-se...

window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Charles Jaimet
fonte
5

Basta definir <body onload="aFunction()">que será chamado após o carregamento da página. Seu código no script é então incluído por aFunction() { }.

Norbert Hartl
fonte
4 
<body onload="myFunction()">

Esse código funciona bem.

Mas o window.onloadmétodo tem várias dependências. Portanto, pode não funcionar o tempo todo.

Akarsh Satija
fonte
3

Usando a biblioteca YUI (eu adoro):

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

Portátil e bonito! No entanto, se você não usar o YUI para outras coisas (consulte o documento), diria que não vale a pena usá-lo.

Nota: para usar este código, você precisa importar 2 scripts

<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>
Valentin Jacquemin
fonte
3

Existe uma documentação muito boa sobre como detectar se o documento foi carregado usando Javascript ou Jquery.

Usando o Javascript nativo, isso pode ser alcançado

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

Isso também pode ser feito dentro do intervalo

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

Por 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;
}

Usando o Jquery Para verificar apenas se o DOM está pronto

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

Para verificar se todos os recursos estão carregados, use window.load

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

fonte
3

Use este código com a biblioteca jQuery, isso funcionaria perfeitamente.

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

  // your javascript event

});
Harish Kumar
fonte
Adicione algumas descrições aqui
Mathews Sunny
3 
$(window).on("load", function(){ ... });

.ready () funciona melhor para mim.

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

.load () funcionará, mas não esperará até que a página seja carregada.

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

Não funciona para mim, quebra o script ao lado do inline. Também estou usando o jQuery 3.2.1 junto com alguns outros garfos do jQuery.

Para ocultar minha sobreposição de carregamento de sites, use o seguinte:

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

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");
    }
});

o mesmo para jQuery:

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

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




NOTA: - Não use a marcação abaixo (porque substitui outras declarações do mesmo tipo):

document.onreadystatechange = ...
T.Todua
fonte
1

Como Daniel diz, você pode usar document.onload.

As várias estruturas javascript (jQuery, Mootools, etc.) usam um evento personalizado 'domready', que eu acho que deve ser mais eficaz. Se você estiver desenvolvendo com javascript, eu recomendo explorar uma estrutura, eles aumentam enormemente sua produtividade.

Iain
fonte
1 

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

// your javascript event here

});
</script>
Expandir snippet

Vô Vị
fonte
4
Esta resposta depende de jquery
Chiptus 05/09
0

Meu conselho é usar o asnycatributo para a tag de script que ajuda você a carregar os scripts externos após o carregamento da página

<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
Kalidass
fonte
7
De acordo com a w3schools , se a assíncrona estiver presente: o script é executado de forma assíncrona com o restante da página (o script será executado enquanto a página continuar a análise) . Talvez você quis dizer isso defer, como o @Daniel Price mencionado?
jk7
0

use a função onload de execução automática

window.onload = function (){
    /* statements */
}();
user7087840
fonte
2
Você pode substituir outros onloadmanipuladores usando essa abordagem. Em vez disso, você deve adicionar o ouvinte.
Leonid Dashko