121

Estou usando o código a seguir para executar algumas instruções após o carregamento da página.

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

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

Mas esse código não funciona corretamente. A função é chamada mesmo que algumas imagens ou elementos estejam sendo carregados. O que eu quero é chamar a função a página é carregada completamente.

javascript html image Neeraj Kumar
fonte

1

Você poderia adicionar uma demonstração no JSFiddle.net ?

Alguns Guy

2

Você poderia usar o jQuery? Se sim, tente #$(window).load()

Matt Hintzke

Sim, você poderia explicar exatamente o que não está funcionando corretamente? Você está recebendo um erro ou talvez esteja chamando uma alertfunção antes que a janela seja redesenhada (fazendo parecer que ela é chamada antes do carregamento)? O código parece bom e forçar os usuários a baixar grandes bibliotecas provavelmente não corrigirá esse problema ou facilitará o diagnóstico.

Jeffrey Sweeney

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

Jeffrey Sweeney

Quando digo que não está funcionando, quero dizer que a função é acionada mesmo que algumas imagens estejam sendo carregadas.

Neeraj Kumar

166

isso pode funcionar para você:

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

ou se seu conforto com jquery,

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

$(document).ready()é acionado em DOMContentLoaded, mas esse evento não está sendo acionado de forma consistente entre os navegadores. É por isso que o jQuery provavelmente implementará algumas soluções alternativas pesadas para oferecer suporte a todos os navegadores. E isso tornará muito difícil "exatamente" simular o comportamento usando Javascript simples (mas não impossível, é claro).

como Jeffrey Sweeney e J Torres sugeriram, acho melhor ter uma setTimeoutfunção, antes de disparar a função como abaixo:

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

Shreedhar
fonte

12

O jQuery readynão fará o que o OP solicitou. readyé acionado quando o DOM é carregado, não após o carregamento dos elementos. loadserá acionado após os elementos concluírem o carregamento / renderização.

Jaime Torres

Parece que o OP deseja que todos os elementos sejam carregados inteiramente, não apenas o HTML.

11138 Jeffrey Sweeney

3

@shreedhar ou ele poderia usar a ferramenta certa para o trabalho ( load).

Jaime Torres

14

setTimeouté uma má ideia. Ele depende do carregamento da página em menos de 3 segundos (ou n segundos, dependendo do valor escolhido). Se o carregamento demorar mais, não funcionará e, se a página carregar mais rapidamente, terá que esperar sem motivo.

JJJ

1

@ChristianMatthew, useCapture Se verdadeiro, useCapture indica que o usuário deseja iniciar a captura. Após o início da captura, todos os eventos do tipo especificado serão despachados para o ouvinte registrado antes de serem despachados para qualquer EventTargets abaixo dele na árvore DOM. Eventos que estão subindo pela árvore não acionam um ouvinte designado para usar a captura. Consulte Eventos de nível 3 do DOM para obter uma explicação detalhada.

Shreedhar 31/08/16

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

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

é compatível com este navegador?

bluejayke 21/02/19

Esta resposta é muito melhor que as outras. +1

Xydez 22/07/19

Muito bom! Obrigado.

Farzin Kanzi

34

Se você pode usar o jQuery, veja load . Você pode então configurar sua função para ser executada após o término do carregamento do elemento.

Por exemplo, considere uma página com uma imagem simples:

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

O manipulador de eventos pode ser vinculado à imagem:

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

Se você precisar carregar todos os elementos na janela atual, poderá usar

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

Jaime Torres
fonte

1

O loadmétodo jQuery não vincula apenas uma função ao evento load usando Javascript? Como isso seria diferente do que o OP já está fazendo?

Alex Kalicki

@AlexKalicki AFAIK, não seria diferente, exceto que o jQuery poderia usar em addEventListenervez de vincular a onloadpropriedade DOM0 .

Alnitak

@AlexKalicki Não posso dizer que ele usa exatamente a mesma funcionalidade, mas de acordo com a documentação, o jQuery está garantindo que todos os elementos, incluindo imagens, sejam carregados antes que isso seja acionado. Eu tenderia a acreditar que haveria lógica adicional, se esse for o caso, e não tenho motivos para não acreditar na documentação, embora nunca tenha encontrado o mesmo problema que o OP está relatando.

Jaime Torres

4

A partir do JQuery v1.8, .load foi descontinuado. fonte

Adonis K. Kakoulidis 31/03

1

Melhor solução de sempre para a pergunta.

Roberto Sepúlveda Bravo

29

Estou um pouco confuso de que o que você quer dizer com carregamento de página concluído, "DOM Load" ou "Content Load" também? Em uma página html, o carregamento pode disparar um evento após um evento de dois tipos.

Carregamento do DOM: que garante que toda a árvore do DOM seja carregada do início ao fim. Mas não garanta o carregamento do conteúdo de referência. Suponha que você tenha adicionado imagens pelas imgtags, para que esse evento garanta que todas as imagens imgcarregadas, mas não as carregadas corretamente, sejam ou não. Para obter este evento, você deve escrever da seguinte maneira:
```
document.addEventListener('DOMContentLoaded', function() {
   // your code here
}, false);
```
Ou usando jQuery:
```
$(document).ready(function(){
// your code
});
```
Após o DOM e o carregamento do conteúdo: que indicam o DOM e o carregamento do conteúdo também. Isso garantirá não apenas a imgmarcação, mas também todas as imagens ou outro conteúdo relativo carregado. Para obter este evento, você deve escrever da seguinte maneira:
```
window.addEventListener('load', function() {...})
```
Ou usando jQuery:
```
$(window).on('load', function() {
 console.log('All assets are loaded')
})
```

Hanif
fonte

2

Esta é a única resposta aqui que dá uma solução não-jQuery para o OP, com uma explicação clara

Velojet

O DOMContentLoadedmanipulador de eventos @Hanif parece não fazer nada por mim, mas loadfaz.

Brandon Benefield

1

Os dois últimos exemplos não precisam de ponto e vírgula no final das linhas?

R. Navega 25/02

11

Se você quiser chamar uma função js em sua página html, use o evento onload. O evento onload ocorre quando o agente do usuário termina de carregar uma janela ou todos os quadros em um FRAMESET. Este atributo pode ser usado com elementos BODY e FRAMESET.

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

user2361682
fonte

7

Dessa forma, você pode lidar com os dois casos - se a página já estiver carregada ou não:

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

tsveti_iko
fonte

3

Como alternativa, você pode tentar abaixo.

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

Isso funciona em todos os casos. Isso será acionado somente quando a página inteira estiver carregada.

Ganesh Ram Ravi
fonte

3

Sua melhor aposta, até onde eu sei, é usar

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

A resposta nº 1 do uso do DOMContentLoadedevento é um retrocesso, pois o DOM será carregado antes do carregamento de todos os ativos.

Outras respostas recomendam setTimeoutque eu me oponho fortemente, pois é completamente subjetivo ao desempenho do dispositivo do cliente e à velocidade da conexão de rede. Se alguém estiver em uma rede lenta e / ou tiver uma CPU lenta, uma página poderá levar de várias a dezenas de segundos para carregar, portanto, você não poderá prever quanto temposetTimeout será necessário.

Quanto ao readystatechange, ele é acionado sempre readyStateque alterações que, de acordo com a MDN , ainda estiverem antes do loadevento.

Completo

O estado indica que o evento de carregamento está prestes a disparar.

Ryan Walker
fonte

2

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

tvrcgo
fonte

2

Embora esse snippet de código possa ser a solução, incluir uma explicação realmente ajuda a melhorar a qualidade da sua postagem. Lembre-se de que você está respondendo à pergunta dos leitores no futuro e essas pessoas podem não saber os motivos da sua sugestão de código.

yivi

@yivi se isso não é uma mensagem automática: É muito óbvio para qualquer um que isso significa de código, especialmente porque há comentários no código ..

bluejayke

1

Se você não estiver usando nenhuma estrutura JS, este projeto é a melhor maneira de obter o estado dom pronto, com compatibilidade entre navegadores

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

Olivier Refalo
fonte

1

Se você já usa o jQuery, tente o seguinte:

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

santosh
fonte

4

Inútil sem explicação.

7276 Daniel W.

1

Posso dizer que a melhor resposta que encontrei é colocar um script de "driver" logo após o </body> comando. É a mais fácil e, provavelmente, mais universal do que algumas das soluções acima.

O plano: na minha página é uma mesa. Escrevo a página com a tabela para o navegador e depois a classifico com JS. O usuário pode recorrer clicando nos cabeçalhos das colunas.

Depois que a tabela termina um </tbody>comando e o corpo termina, eu uso a seguinte linha para chamar o JS de classificação para classificar a tabela pela coluna 3. Tirei o script de classificação da Web para que não seja reproduzido aqui. Pelo menos no próximo ano, você pode ver isso em operação, incluindo o JS, em static29.ILikeTheInternet.com. Clique em "aqui" na parte inferior da página. Isso exibirá outra página com a tabela e os scripts. Você pode vê-lo colocar os dados e classificá-los rapidamente. Eu preciso acelerar um pouco, mas o básico está lá agora.

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

MakerMikey

Micheal Morrow
fonte

0

Experimente este jQuery :

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

djserva
fonte

1

O jQuery readynão fará o que o OP solicitou. readyé acionado quando o DOM é carregado, não após o carregamento dos elementos. loadserá acionado após os elementos concluírem o carregamento / renderização.

Jaime Torres

0

chamar uma função após o tempo limite de carregamento completo da página

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

Expandir snippet

MH
fonte

0

Costumo usar o seguinte padrão para verificar se o documento está completo. A função retorna uma promessa (se você precisar oferecer suporte ao IE, inclua o polyfill ) que será resolvida assim que o documento concluir o carregamento. Ele é usado setIntervalpor baixo porque uma implementação semelhante setTimeoutpode resultar em uma pilha muito profunda.

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

Obviamente, se você não precisa dar suporte ao IE:

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

Com essa função, você pode fazer o seguinte:

getDocReadyPromise().then(whatIveBeenWaitingToDo);

Paul Rowe
fonte

-1

Estou usando componentes da web para que funcione para mim:

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

ufukomer
fonte

-3

Coloque seu script após a conclusão da tag body ... funciona ...

Kalyan
fonte

executar função após o carregamento completo da página

Respostas:

Javascript

o mesmo para jQuery: