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?
Respostas:
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 .
document.onload=não é invasivo pt.wikipedia.org/wiki/Unobtrusive_JavaScript
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;
}
}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
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:
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.
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.
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.
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
Veja enganchar document.onloadou no jQuery $(document).load(...).
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><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 você estiver usando jQuery,
$(function() {...});
é equivalente a
$(document).ready(function () { })
ou outra mão curta:
$().ready(function () { })
Consulte Em qual evento o JQuery $ function () é acionado? e https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}veja aqui: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
À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); };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() { }.
<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.
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>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);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" );
});Use este código com a biblioteca jQuery, isso funcionaria perfeitamente.
$(window).bind("load", function() {
// your javascript event
});$(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>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: - Não use a marcação abaixo (porque substitui outras declarações do mesmo tipo):
document.onreadystatechange = ...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.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>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>use a função onload de execução automática
window.onload = function (){
/* statements */
}(); onloadmanipuladores usando essa abordagem. Em vez disso, você deve adicionar o ouvinte.