Como executar uma função quando a página está totalmente carregada?

307

Preciso executar algum código JavaScript quando a página estiver totalmente carregada. Isso inclui coisas como imagens.

Sei que você pode verificar se o DOM está pronto, mas não sei se é o mesmo que quando a página está totalmente carregada.

javascript Ben Shelock
fonte
7
Então, como você verifica se o DOM está pronto?
precisa

Respostas:

442

Isso é chamado load. Tudo aconteceu antes que o DOM ready estivesse disponível, e o DOM ready foi realmente criado pelo motivo exato que loadesperou nas imagens.

window.addEventListener('load', function () {
  alert("It's loaded!")
})
Matchu
fonte
3
então, apenas para esclarecer (se eu puder), comparando com o DOM pronto, window.onloadé chamado quando cada componente / recurso da página (ou seja, * incluindo * imagens). Estou certo?
breakphreak
19
@BreakPhreak: yes :) onloadaguarda todos os recursos que fazem parte do documento. Isso exclui, é claro, solicitações criadas dinamicamente que não fazem parte do próprio documento, por exemplo, uma solicitação AJAX.
Matchu
3
script não está totalmente carregado
HD ..
E se meu script puder ser carregado dinamicamente e o evento "load" ocorrer antes de adicionar meu manipulador?
Pamelus
31
Uma maneira melhor seria addEventListener("load", function(){... em })vez de substituir a onloadpropriedade.
user4642212
30

Geralmente você pode usar window.onload, mas pode notar que navegadores recentes não são acionados window.onloadquando você usa os botões de histórico de retroceder / avançar.

Algumas pessoas sugerem contorções estranhas para solucionar esse problema, mas, na verdade, se você criar um window.onunloadmanipulador (mesmo que não faça nada), esse comportamento de cache será desativado em todos os navegadores. O MDC documenta esse "recurso" muito bem, mas por algum motivo ainda existem pessoas usando setIntervale outros hacks estranhos.

Algumas versões do Opera têm um bug que pode ser contornado adicionando o seguinte em algum lugar da sua página:

<script>history.navigationMode = 'compatible';</script>

Se você está apenas tentando obter uma função javascript chamada uma vez por visualização (e não necessariamente após o carregamento do DOM), você pode fazer algo assim:

<img src="javascript:location.href='javascript:yourFunction();';">

Por exemplo, eu uso esse truque para pré-carregar um arquivo muito grande no cache em uma tela de carregamento:

<img src="bigfile"
onload="this.location.href='javascript:location.href=\'javascript:doredir();\';';doredir();">
geocar
fonte
Alguém pode esclarecer como esse truque funciona? Muito complicado para mim, doh ..
Razzle
20

Por uma questão de integridade, você também pode associá-lo ao DOMContentLoaded, que agora é amplamente suportado

document.addEventListener("DOMContentLoaded", function(event){
  // your code here
});

Mais informações: https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

murb
fonte
7
Esta resposta é precisamente o oposto do que foi perguntado na pergunta.
Muhammad bin Yusrat
2
De fato, o evento DOMContentLoaded é acionado quando todo o conteúdo do DOM foi carregado, antes de carregar todas as suas dependências. Como os usuários no segmento de respostas referenciados $.ready, achei que deu uma boa contribuição. Btw. Eu usaria o addEventListenermétodo-também também para o loadevento, pois ele permite que você tenha vários retornos de chamada:window.addEventListener("load", function(event){ // your code here });
murb
16

Tente fazer isso apenas executar após a página inteira ter sido carregada

Por Javascript

window.onload = function(){
    // code goes here
};

Por Jquery

$(window).bind("load", function() {
    // code goes here
});
absiddiqueLive
fonte
1
$(window)me faz pensar que isso seria jquery - certo? Ou estou confundindo alguma sintaxe javascript? (Eu sou novo em JS).
Azendale 11/11/2015
2
por que não usar simplesmente $(document).ready();quando o jQuery está disponível?
Andreas
o seu é o documento (mais ou menos apenas o HTML analisado), o outro ("carregamento") é tudo, incluindo imagens e estilos. Depende do que você precisa.
amenthes
11

Experimente este código

document.onreadystatechange = function () {
  if (document.readyState == "interactive") {
    initApplication();
  }
}

visite https://developer.mozilla.org/en-US/docs/DOM/document.readyState para obter mais detalhes

Jacob Nelson
fonte
Sim, isso é útil. Muito obrigado ~
Bravo Yeung
2
"interactive"não está totalmente carregado. "complete"é totalmente carregado
Ryan Walker
Finalmente! Vale um milhão, Jacob. Todos os numerosos métodos listados aqui falharam (na melhor das hipóteses, um botão de opção seria atualizado e um cálculo resultante poderia ser feito, mas o botão não apareceria pressionado), e seu método é suficiente.
secr 13/06
8

o evento window.onload será acionado quando tudo estiver carregado, incluindo imagens etc.

Você deseja verificar o status de DOM pronto se quiser que seu código js seja executado o mais cedo possível, mas ainda precisa acessar os elementos DOM.

codefly
fonte
8

Javascript usando o onLoad()evento, aguardará o carregamento da página antes de executar.

<body onload="somecode();" >

Se você estiver usando a função de documento pronto da estrutura jQuery, o código será carregado assim que o DOM for carregado e antes do conteúdo da página:

$(document).ready(function() {
    // jQuery code goes here
});
Defoncesko
fonte
7

Convém usar window.onload , pois os documentos indicam que ele não é acionado até que o DOM esteja pronto e TODOS os outros ativos da página (imagens etc.) sejam carregados.

Marc Novakowski
fonte
Ah brilhante. Bem, eu fiz isso. A última imagem na página é esta: <img src = "imdbupdate.php? Update = ajax" style = "exibição: oculta" onload = "window.location = 'movies.php? Do = admincp'" /> No entanto, não me readirect
Ben Shelock
...o que? Deseja redirecionar quando uma imagem é carregada?
Matchu 23/06/09
Não sei por que você desejaria isso, mas o motivo pelo qual não é redirecionado pode ser o fato de ser exibido: oculto e, portanto, o navegador não se preocupa em carregá-lo, pois não será mostrado.
Matchu 23/06/09
talvez seja apenas uma imagem oculta que faz algo importante no servidor, como rastrear uma ocorrência ou fazer algo no banco de dados?
23411 Marc Novakowski
Posso entender isso, mas redirecioná-lo depois não faz sentido para mim. Por que ter a página se você não deseja que o usuário gaste tempo nela? E se o objetivo é redirecionar no carregamento, por que não usar apenas um evento window.onload, já que é uma implementação mais limpa em geral?
Matchu 23/06/09
3

E aqui está uma maneira de fazer isso com o PrototypeJS :

Event.observe(window, 'load', function(event) {
    // Do stuff
});
Mark Biek
fonte
2

Nos navegadores modernos com javascript moderno (> = 2015), você pode adicionar type="module"à sua tag de script e tudo dentro desse script será executado após o carregamento de toda a página. por exemplo:

<script type="module">
  alert("runs after") // Whole page loads before this line execute
</script>
<script>
  alert("runs before")
</script>

também navegadores mais antigos entenderão o nomoduleatributo. Algo assim:

<script nomodule>
  alert("tuns after")
</script>

Para mais informações, você pode visitar javascript.info .

Pouria Moosavi
fonte
1

Se você precisar usar muitos onloadusos $(window).load(jQuery):

$(window).load(function() {
    //code
});
Sebastien Horin
fonte
1

A propriedade onload do GlobalEventHandlers mixin é um manipulador de eventos para o evento load de um Window, XMLHttpRequest, elemento etc., que é acionado quando o recurso é carregado.

Então, basicamente, o javascript já possui o método onload na janela, que é executado em qual página totalmente carregada, incluindo imagens ...

Você pode fazer algo:

var spinner = true;

window.onload = function() {
  //whatever you like to do now, for example hide the spinner in this case
  spinner = false;
};
Alireza
fonte
-1

Atualização de 2019: esta foi a resposta que funcionou para mim. Como eu precisava de várias solicitações ajax para disparar e retornar dados primeiro para contar os itens da lista. 

$(document).ajaxComplete(function(){
       alert("Everything is ready now!");
});
norcal johnny
fonte