JavaScript que executa após o carregamento da página
https://stackoverflow.com/questions/807878
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Estou executando um script externo, usando um <script> lado de dentro <head>.
Agora desde que o script é executado antes da A página carregou, não posso acessar o <body>, entre outras coisas. Eu gostaria de executar algum JavaScript após o documento ter sido "carregado" (HTML totalmente baixado e in-ram). Existem eventos nos quais posso conectar quando meu script é executado, que será acionado na página carregando?
Solução
Essas soluções funcionarão:
<body onload="script();">
ou
document.onload = function ...
ou até
window.onload = function ...
Observe que A última opção é um caminho melhor para ir já que é discreto e é considerado mais padrão.
Outras dicas
Maneira razoavelmente portátil e sem estrutura de ter seu script definir 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;
}
}
Lembre -se de que carregar a página tem mais de um estágio. Btw, este é puro javascript
"DomContentLoaded"
Este evento é demitido quando o O documento HTML inicial foi completamente carregado e analisado, sem esperar por folhas de estilo, imagens e sub -quadros para terminar o carregamento. Nesta fase, você pode otimizar programaticamente o carregamento de imagens e CSS com base no dispositivo do usuário ou na velocidade de largura de banda.
Extemeas após o DOM ser carregado (antes do IMG e CSS):
document.addEventListener("DOMContentLoaded", function(){
//....
});
Nota: O JavaScript síncrono faz uma pausa para 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ê poderia Vire seu javascript assíncrono e Otimize o carregamento de folhas de estilo
"carregar"
Um evento muito diferente, carregar, deve ser usado apenas para detectar um página totalmente carregada. É um erro incrivelmente popular usar a carga onde o DomContentLoaded seria muito mais apropriado, por isso seja cauteloso.
Extique 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
MDN Lista de todos os eventos:
Você pode colocar um atributo "Onload" dentro do corpo
...<body onload="myFunction()">...
Ou se você estiver usando jQuery, você pode fazer
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
Espero que responda sua pergunta.
Observe que o $ (janela) .Load será executado após o documento renderizado na sua página.
Se os scripts forem carregados dentro do <head> do documento, então é possível usar o defer atributo na tag de script.
Exemplo:
<script src="demo_defer.js" defer></script>
A partir de https://developer.mozilla.org:
adiar
Esse atributo booleano está definido para indicar para um navegador que o script deve ser executado após a análise do documento, mas antes de disparar o DOMContentLoaded.
Esse atributo não deve ser usado se o atributo SRC estiver ausente (ou seja, para scripts embutidos), neste caso, não teria efeito.
Para obter um efeito semelhante para scripts inseridos dinamicamente, use async = false. Os scripts com o atributo de adiamento serão executados na ordem em que aparecem no documento.
Aqui está um script baseado no carregamento do JS diferido 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 eu coloco isso?
Colar código em seu html pouco antes do
</body>tag (próximo à parte inferior do seu arquivo HTML).
O que isso faz?
Este código diz aguardar que o documento inteiro carregue e, em seguida, 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 em carregamento adiado de javascript PagesPeed Google Concept e também proveniente deste artigo Adiar carregando javascript
Olhe para conectar document.onload ou em jQuery $(document).load(...).
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}
olhe aqui: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
Melhor método, recomendado pelo Google também. :)
<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
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
Se você está usando jQuery,
$(function() {...});
é equivalente a
$(document).ready(function () { })
<body onload="myFunction()">
Este código funciona bem.
Mas window.onload O método tem várias dependências. Portanto, pode não funcionar o tempo todo.
Às vezes, acho que em páginas mais complexas que nem todos os elementos foram carregados pela janela do tempo. Se for esse o caso, adicione o setTimeout antes da sua função para atrasar é um momento. Não é elegante, mas é um hack simples que se torna bem.
window.onload = function(){ doSomethingCool(); };
torna-se...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Apenas defina <body onload="aFunction()"> Isso será chamado depois que a página for carregada. Seu código no script está do que incluído por aFunction() { }.
$ (janela) .on ("load", function () {...});
.pronto() Funciona melhor para mim.
$(document).ready(function(){ ... });
.carregar() funcionará, mas não esperará até que a página seja carregada.
jQuery(window).load(function () { ... });
Não funciona para mim, quebra o próximo script embutido. Também estou usando o JQuery 3.2.1 junto com alguns outros garfos jQuery.
Para ocultar meus sites de sobreposição de carregamento, eu uso o seguinte:
<script>
$(window).on("load", function(){
$('.loading-page').delay(3000).fadeOut(250);
});
</script>
Usando o Biblioteca Yui (Eu amo isso):
YAHOO.util.Event.onDOMReady(function(){
//your code
});
Portátil e lindo! No entanto, se você não usar o YUI para outras coisas (veja seu doc), eu diria que não vale a pena usá -lo.
NB: 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>
Há 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);
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 Dom estiver pronto
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});
Para verificar se todos os recursos são carregados, use janela.load
$( window ).load(function() {
console.log( "window loaded" );
});
Use este código com a JQuery Library, isso funcionaria perfeitamente bem.
$(window).bind("load", function() {
// your javascript event
});
Como Daniel diz, você pode usar o documento.onload.
As várias estruturas JavaScript, mas JQuery, MooTools etc.) usam um evento personalizado 'Domready', que eu acho que deve ser mais eficaz. Se você está desenvolvendo com JavaScript, eu recomendo explorar uma estrutura, eles aumentam massivamente sua produtividade.
Meu uso de conselhos asnyc atributo para 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>
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Use a função Onload de auto -execução
window.onload = function (){
/* statements */
}();
