Estoy ejecutando un script externo, usando un <script>interior<head> .
Ahora, dado que el script se ejecuta antes de que se cargue la página, no puedo acceder a <body>, entre otras cosas. Me gustaría ejecutar JavaScript después de que el documento se haya "cargado" (HTML completamente descargado y en RAM). ¿Hay algún evento al que pueda conectarme cuando se ejecute mi script, que se activará al cargar la página?
Respuestas:
Estas soluciones funcionarán:
<body onload="script();">o
document.onload = function ...o incluso
window.onload = function ...Tenga en cuenta que la última opción es una mejor opción, ya que es discreta y se considera más estándar .
document.onload=no es molesto en.wikipedia.org/wiki/Unobtrusive_JavaScript
Forma razonablemente portátil y no marco de hacer que su script establezca una función para ejecutarse en el momento de la carga:
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 se activa cuando el documento HTML inicial se ha cargado y analizado por completo , sin esperar a que las hojas de estilo, las imágenes y los subtramas terminen de cargarse. En esta etapa, podría optimizar mediante programación la carga de imágenes y css según el dispositivo del usuario o la velocidad del ancho de banda.
Se ejecuta después de cargar DOM (antes de img y css):
document.addEventListener("DOMContentLoaded", function(){
//....
});Nota: JavaScript síncrono pausa el análisis del DOM. Si desea que el DOM se analice lo más rápido posible después de que el usuario solicitó la página, puede convertir su JavaScript en asíncrono y optimizar la carga de hojas de estilo
Un evento muy diferente, cargar , solo debe usarse para detectar una página completamente cargada . Es un error increíblemente popular usar load donde DOMContentLoaded sería mucho más apropiado, así que tenga cuidado.
Ejecuta después de que todo se carga y analiza:
window.addEventListener("load", function(){
// ....
});Recursos de 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 los eventos:
window.onload = ...pensar que mi script esperaría hasta que todo se descargara completamente antes de ejecutarse, pero parece que window.onloadrealmente se comporta así document.addEventListener("DOMContentLoaded", ..., mientras que window.addEventListener("load", ...realmente espera que todo se descargue completamente. Hubiera pensado que window.onloaddebería ser equivalente a window.addEventListener("load", ...más que document.addEventListener("DOMContentLoaded", ...?? Obtuve el mismo resultado en Chrome y FF.
Puedes poner un atributo "onload" dentro del cuerpo
...<body onload="myFunction()">...O si está utilizando jQuery, puede hacer
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })Espero que responda tu pregunta.
Tenga en cuenta que $ (window) .load se ejecutará después de que el documento se muestre en su página.
Si los scripts se cargan dentro <head>del documento, entonces es posible usar el deferatributo en la etiqueta del script.
Ejemplo:
<script src="demo_defer.js" defer></script>Desde https://developer.mozilla.org :
aplazar
Este atributo booleano está configurado para indicar a un navegador que el script debe ejecutarse después de analizar el documento, pero antes de activar DOMContentLoaded.
Este atributo no debe usarse si el atributo src está ausente (es decir, para scripts en línea), en este caso no tendría ningún efecto.
Para lograr un efecto similar para los scripts insertados dinámicamente, use async = false en su lugar. Las secuencias de comandos con el atributo de aplazamiento se ejecutarán en el orden en que aparecen en el documento.
Aquí hay un script basado en la carga diferida de js después de cargar la 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>¿Dónde coloco esto?
Pegue el código en su HTML justo antes de la
</body>etiqueta (cerca de la parte inferior de su archivo HTML).
¿Qué hace?
Este código dice que espere a que se cargue todo el documento, luego cargue el archivo externo
deferredfunctions.js.
Aquí hay un ejemplo del código anterior: aplazar la representación de JS
Escribí esto basado en la carga rechazada del concepto de google de velocidad de página de JavaScript y también provengo de este artículo Aplazar la carga de JavaScript
Mira enganchar document.onloado en jQuery $(document).load(...).
Fiddle de trabajo en<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
Si está utilizando jQuery,
$(function() {...});
es equivalente a
$(document).ready(function () { })
u otra mano corta:
$().ready(function () { })
Consulte ¿ En qué evento se activa JQuery $ function ()? y https://api.jquery.com/ready/
document.onreadystatechange = function(){
if(document.readyState === 'complete'){
/*code here*/
}
}mira aquí: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx
A veces, en páginas más complejas, encuentro que no todos los elementos se han cargado por la ventana de tiempo. Si ese es el caso, agregue setTimeout antes de que su función demore un momento. No es elegante, pero es un truco simple que funciona bien.
window.onload = function(){ doSomethingCool(); };se convierte en ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };Simplemente defina <body onload="aFunction()">que se llamará después de que se haya cargado la página. Su código en el script está encerrado por aFunction() { }.
<body onload="myFunction()">Este código funciona bien.
Pero el window.onloadmétodo tiene varias dependencias. Por lo tanto, puede que no funcione todo el tiempo.
Usando la biblioteca YUI (me encanta):
YAHOO.util.Event.onDOMReady(function(){
//your code
});Portátil y hermoso! Sin embargo, si no usa YUI para otras cosas (vea su documento), diría que no vale la pena usarlo.
NB: para usar este código necesita 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 una muy buena documentación sobre cómo detectar si el documento se ha cargado. usando Javascript o Jquery.
Usando el Javascript nativo esto se puede lograr
if (document.readyState === "complete") {
init();
}Esto también se puede hacer dentro del 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 Jquery Para verificar solo si DOM está listo
// A $( document ).ready() block.
$( document ).ready(function() {
console.log( "ready!" );
});Para verificar si todos los recursos están cargados, use window.load
$( window ).load(function() {
console.log( "window loaded" );
});Use este código con la biblioteca jQuery, esto funcionaría perfectamente bien.
$(window).bind("load", function() {
// your javascript event
});$(window).on("load", function(){ ... });.ready () funciona mejor para mí.
$(document).ready(function(){ ... });.load () funcionará, pero no esperará hasta que se cargue la página.
jQuery(window).load(function () { ... });No funciona para mí, rompe el siguiente script en línea. También estoy usando jQuery 3.2.1 junto con algunos otros tenedores jQuery.
Para ocultar la superposición de carga de mis sitios web, utilizo lo siguiente:
<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: - No utilice el marcado a continuación (porque sobrescribe otras declaraciones del mismo tipo):
document.onreadystatechange = ...Como dice Daniel, podría usar document.onload.
Sin embargo, los diversos marcos javascript (jQuery, Mootools, etc.) usan un evento personalizado 'domready', que creo que debe ser más efectivo. Si está desarrollando con javascript, le recomiendo explotar un marco, aumentan enormemente su productividad.
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>Mi consejo es usar el asnycatributo para la etiqueta de script que le ayuda a cargar los scripts externos después de cargar la página
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>defer, como mencionó @Daniel Price?
utilizar la función de autocarga de carga
window.onload = function (){
/* statements */
}(); onloadcontroladores utilizando este enfoque. En cambio, debe agregar oyente.