La diferencia entre $ready y window.onload en jquery
En pocas palabras, está representado por la siguiente tabla:
ready() de Jquery y load() de Javascrpit
window.onload() $ ( document).ready()
Tiempo de carga
Debes esperar hasta que la página web esté completamente cargada (incluyendo imágenes, etc.) antes de poder ejecutar el código JS
Jquery ready() y load() de Javascrpit
Ready() de Jquery() y load() de Javascrpit
Antes de ejecutar el código JS, solo necesitas esperar la estructura DOM en la página web a cargar
Número de ejecuciones
Solo se puede ejecutar una vez. Si se ejecuta por segunda vez, se sobrescribirá la primera ejecución.
Se puede ejecutar varias veces y la enésima ejecución no será sobrescrita por la ejecución anterior
Ejemplo
El siguiente código no se puede ejecutar correctamente:
ventana.onload = función() { alerta("texto1" );}
ventana.onload = función() { alerta("texto2");}; p>window.alert("text2");};
El resultado es solo la segunda salida
El siguiente código se ejecuta correctamente:
$(document ).ready(function(){alert("Hola")});
$(document).ready(function(){alert("Hola")}); > El resultado se muestra dos veces
Solución de acceso directo Sin solución $( function () {})
Por lo general, el load() de la ventana se usa para configurar el evento de carga de la etiqueta del cuerpo. Sin embargo, el evento onload no se activa hasta que se hayan cargado todos los elementos de la página, incluidas las imágenes y las tablas de datos de gran tamaño. Si hay muchas imágenes en la página o las imágenes son demasiado grandes, la carga llevará más tiempo, lo que hará que la página deje de responder o que el usuario deba realizar otras operaciones.
Jeuery ready() puede realizar las operaciones correspondientes después de que se carga la página dom (nodo) sin esperar a que se carguen todos los elementos. Por ejemplo, si sabe que hay una imagen en algún lugar de la página y no tiene que esperar a que se muestre, puede vincularle un método de clic.
Generalmente no se recomienda usar load(), pero aquí nos centraremos en $(selector).ready()).
Principio:
Cuando se carga el script jquery, se configurará una etiqueta isReady para escuchar el evento DOMContentLoaded (esto no es lo que tiene el navegador, y funcionan diferentes navegadores y jquery). No es lo mismo). Por supuesto, cuando se llama a la función lista, si isReady no está configurado, es decir, la página no está cargada, las funciones a ejecutar se almacenarán en caché en una matriz, y cuando se cargue la página, las funciones almacenadas en caché ser ejecutados uno por uno.
Análisis de código detallado en Jquery:
ready: function(fn) {// bind oyente bindReady();// si DOM cargado if (jQuery.isReady)// ejecuta esto función ahora fn.call( documento, jQuery ); // de lo contrario, guárdelo en caso contrario // si (jQuery.isReady )// ejecute esta función ahora fn.call( documento, jQuery ); it else // // agrega la función a la matriz de caché jQuery.readyList.push( function() { return fn.call(this, jQuery); }.);return this;
}< / p>
Por supuesto, jquery no funciona en diferentes navegadores.
La función bindReady() utilizada para notificar cuando se completa la carga del dom también es diferente
var readyBound = false; function bindReady(){if ( readyBound ) return;
readyBound = true ;// Mozilla, opera, webkitnightlies admiten el evento DOMContentLoaded if ( document.addEventListener && !jQuery.browser.addEventListener( "DOMContentLoaded", jQuery.ready, false );// Si es un ie y no está incrustado en un marco // usted Es necesario seguir comprobando para ver si ( jQuery.browser.msie && window == top ) (function(){if (jQuery.isReady) return;try {document.ready();
})( );if ( jQuery.browser.opera )
document. addEventListener( "DOMContentLoaded", function () {if (jQuery.isReady) return;for (var i = 0; i < document.ready ( );
}, false);if ( jQuery.browser.safari ) {var numStyles;
(function(){if (jQuery.isReady) return;if ( document. readyState ! = "cargado" && document.readyState ! = "completo" ) {
setTimeout( arguments.callee, 0 );return;
}if ( numStyles === indefinido )
numStyles = jQuery("estilo, enlace[rel = hoja de estilo]").length;if ( document.styleSheets.length ! = numStyles ) {
setTimeout( arguments.callee , 0 );return;
}// Y ejecuta cualquier función de espera jQuery.ready();
})();
}// Retorno Volviendo a window.onload, esto siempre funcionará jQuery.event.add( window, "load", jQuery.ready
}
}
); }