vanilla - document.ready javascript w3schools
¿Cuál es la diferencia entre $(ventana).load y $(document).ready? (9)
$ (document) .ready es un control deslizante rápido en comparación $ (window) .load Event.
$ (document) .ready es fire cuando Dom se carga pero $ (ventana) .load Se dispara el evento cuando Dom, css e images se cargan completamente.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js" ></script>
<script>
$(window).load(function () {
var img = $(''#img1'');
alert( "Image Height = " + img.height() + "<br>Image Width = " + img.width());
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img id="img1" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTozkxoNSH8739juRXJJX5JxREAB6I30bFyexPoCdRVa2fKfH2d" />
</div>
</form>
</body>
</html>
He estado teniendo un problema últimamente con mi código JavaScript y quitando una parte de mi código de mi $(document).ready() y poniéndolo dentro de $(window).load() corrigió el problema.
Ahora entiendo que window.load se window.load justo después de document.ready , pero ¿por qué no está listo después de document.ready , es decir después de window.load() ?
El estado de carga es el estado cuando se ha creado el objeto de la ventana y todos los componentes necesarios, incluido el DOM, se han cargado en la memoria, pero no se han transferido al motor de renderizado para representarlos en la página.
El estado Listo, por otro lado, asegura que los elementos DOM, los eventos y otros componentes dependientes se transfieren al motor de renderizado, se representan en la página y están listos para la interacción y la manipulación.
En palabras simples, se window.load cuando se carga todo el contenido de la ventana, mientras document.ready se llama a document.ready cuando se carga DOM y la estructura del documento está lista.
$(document).ready() es wrap DOM en <body>...</body>
$(window).load() es papa del documento wrap all DOM in <html>...</html>
Usemos en su caso para guardar el procesamiento de renderizado.
$(document).ready() significa que el DOM de su página está listo para ser manipulado.
window.load() se activa cuando toda la página (incluidos componentes como CSS y archivos de imagen) se ha cargado por completo.
¿Qué estás intentando lograr?
$(document).ready es el evento jQuery que se activa cuando DOM está cargado, por lo que se activa cuando la estructura del documento está lista.
$(window).load evento $(window).load se $(window).load después de $(window).load todo el contenido (incluidos css, imágenes, etc.).
Esta es la gran diferencia.
$(document).ready es un evento jQuery. Dispara tan pronto como el DOM está cargado y listo para ser manipulado por script. Este es el punto más temprano en el proceso de carga de la página donde la secuencia de comandos puede acceder de forma segura a los elementos en el html DOM de la página. Este evento se dispara antes de que todas las imágenes, css, etc. estén completamente cargados.
window.load() se activa cuando toda la página (incluidos componentes como CSS y archivos de imagen) se ha cargado por completo.
load se invoca cuando se terminan de cargar todos los activos, incluidas las imágenes. ready se dispara cuando el DOM está listo para la interacción.
Desde el MDC, window.onload :
El evento de carga se dispara al final del proceso de carga del documento. En este punto, todos los objetos en el documento están en el DOM, y todas las imágenes y subtramas han terminado de cargarse.
De la documentación de jQuery API, api.jquery.com/ready :
Si bien JavaScript proporciona el evento de carga para ejecutar el código cuando se procesa una página, este evento no se desencadena hasta que todos los activos, como las imágenes, se hayan recibido por completo. En la mayoría de los casos, la secuencia de comandos se puede ejecutar tan pronto como la jerarquía DOM se haya construido por completo. Se garantiza que el controlador pasado a .ready () se ejecutará después de que el DOM esté listo, por lo que este suele ser el mejor lugar para adjuntar todos los demás controladores de eventos y ejecutar otro código jQuery. Cuando se utilizan scripts que se basan en el valor de las propiedades de estilo CSS, es importante hacer referencia a las hojas de estilo externas o incrustar elementos de estilo antes de hacer referencia a los scripts.
$(document).ready(function(){
//code here
});
El código anterior se usa casi siempre cuando trabajamos con jQuery .
Este código se usa cuando queremos inicializar nuestros códigos jQuery después de que el DOM esté listo.
$(window).load()
A veces quieres manipular imágenes. Por ejemplo, desea alinear vertical y horizontalmente una imagen y necesita obtener el ancho y el alto de la imagen para poder hacerlo. Con $(document).ready() no podrá hacer eso si el visitante no tiene la imagen ya cargada, en cuyo caso deberá inicializar la función de alineación jquery cuando la imagen termine de cargarse. Ahí es donde usamos $(window).load()