validacion - validar formulario javascript html5
JavaScript que se ejecuta después de cargar la página (24)
Estoy ejecutando un script externo, usando un <script> dentro de <head> .
Ahora que el script se ejecuta antes de que la página se haya cargado, no puedo acceder al <body> , entre otras cosas. Me gustaría ejecutar algo de JavaScript después de que el documento se haya "cargado" (HTML descargado completamente y en la RAM). ¿Hay algún evento en el que pueda engancharme cuando mi script se ejecute y se activará al cargar la página?
Tenga en cuenta que cargar la página tiene más de una etapa. Por cierto, esto es JavaScript puro
"DOMContentLoaded"
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 subtítulos terminen de cargarse. En esta etapa, se podría optimizar mediante programación la carga de imágenes y css según el dispositivo del usuario o la velocidad de ancho de banda.
Ejemplares después de cargar el DOM (antes de img y css):
document.addEventListener("DOMContentLoaded", function(){
//....
});
Nota: JavaScript síncrono hace una pausa en el análisis del DOM. Si desea que el DOM se analice lo más rápido posible después de que el usuario haya solicitado la página, puede convertir su JavaScript en asíncrono y optimizar la carga de las hojas de estilo.
"carga"
Un evento muy diferente, carga , solo debe usarse para detectar una página completamente cargada . Es un error increíblemente popular utilizar la carga donde DOMContentLoaded sería mucho más apropiado, así que tenga cuidado.
Exectos después de que todo está cargado y analizado:
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
MDN lista de todos los eventos:
// Está probado y funcionando :)
$ (document) .ready (function () {functon1 (); function2 ()});
A veces encuentro en páginas más complejas que no todos los elementos se han cargado en el momento en que se activa la descarga de la ventana. Si ese es el caso, agregar setTimeout antes de que su función retrase es un momento. No es elegante pero es un simple truco que funciona bien.
window.onload = function(){ doSomethingCool(); };
se convierte en ...
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
Aquí hay una secuencia de comandos basada en la carga js diferida 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 etiqueta
</body>(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: diferir la representación de JS
Escribí esto en base a la carga diferida del concepto de google de la velocidad de las páginas de javascript y también de este artículo Aplazar la carga de javascript
Como dice Daniel, puedes usar document.onload.
Los distintos marcos de javascript (jQuery, Mootools, etc.) utilizan un evento personalizado ''domready'', que creo que debe ser más efectivo. Si está desarrollando con javascript, recomiendo encarecidamente la explotación de un marco, aumentan enormemente su productividad.
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 manera de ir, ya que es unobstrusive y se considera más estándar .
Hay una muy buena documentación sobre cómo detectar si el documento se ha cargado utilizando 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" );
});
Mejor método, recomendado por Google también. :)
<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
Mi consejo es que use el atributo asnyc para la etiqueta de script que le ayude 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>
Mire en hooking document.onload o en jQuery $(document).load(...) .
Puedes poner un atributo "onload" dentro del cuerpo
...<body onload="myFunction()">...
O si estás usando jQuery, puedes hacerlo
$(document).ready(function(){ /*code here*/ })
or
$(window).load(function(){ /*code here*/ })
Espero que responda a tu pregunta.
Tenga en cuenta que la carga $ (window). Se ejecutará después de que el documento se represente en su página.
Razonablemente portátil, una forma no marco de hacer que su script configure una función para que se ejecute en tiempo de 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;
}
}
Si está utilizando jQuery,
$(function() {...});
es equivalente a
$(document).ready(function () { })
Si los scripts se cargan dentro del <head> del documento, entonces es posible usar el atributo de defer en la etiqueta del script.
Ejemplo:
<script src="demo_defer.js" defer></script>
Desde https://developer.mozilla.org :
aplazar
Este atributo booleano se configura para indicar a un navegador que el script debe ejecutarse después de que se haya analizado el documento, pero antes de disparar DOMContentLoaded.
Este atributo no debe utilizarse si el atributo src está ausente (es decir, para los scripts en línea), en este caso no tendría ningún efecto.
Para lograr un efecto similar para las secuencias de comandos insertadas dinámicamente, use async = false en su lugar. Los scripts con el atributo de aplazamiento se ejecutarán en el orden en que aparecen en el documento.
Simplemente defina <body onload="aFunction()"> que se llamará después de que se haya cargado la página. Su código en el script es el que está incluido en aFunction() { } .
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 (consulte su documento), diría que no vale la pena usarlo.
NB: para usar este código necesitas 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>
Utilice este código con la biblioteca jQuery, esto funcionaría perfectamente bien.
<script>
$(window).on("load", function(){
$(''.loading-page'').delay(3000).fadeOut(250);
});
</script>
jQuery envuelve eso para ti. Probablemente encontrarás que es la solución más fácil.
utilizar la función de carga de auto ejecución
window.onload = function (){
/* statements */
}();
$ (ventana) .on ("cargar", función () {...});
Funciona mejor para mí.
$(window).bind("load", function() {
// your javascript event
});
Funcionará, pero no esperará hasta que se cargue la página.
$(document).ready(function(){ ... }
No funciona para mí, rompe el siguiente script en línea. También estoy usando jQuery 3.2.1 junto con otras bifurcaciones de jQuery.
Para ocultar la superposición de carga de mis sitios web, uso lo siguiente:
jQuery(window).load(function () { ... }
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Page is loaded");
}
</script>
</head>
<body onload="myFunction()">
<h1>Hello World!</h1>
</body>
</html>
<script type="text/javascript">
$(window).bind("load", function() {
// your javascript event here
});
</script>
<body onload="myFunction()">
Este código funciona bien.
Pero el método window.onload tiene varias dependencias. Así que puede que no funcione todo el tiempo.
document.onreadystatechange = function(){
if(document.readyState === ''complete''){
/*code here*/
}
}
busque aquí: http://msdn.microsoft.com/en-us/library/ie/ms536957(v=vs.85).aspx