1245

¿Cuáles son las diferencias entre window.onloadel $(document).ready()método de JavaScript y jQuery ?

javascript jquery dom-events unobtrusive-javascript Vaibhav Jain
fuente

2

posible duplicado de $ (documento) .ready equivalente sin jQuery

Kzqai

La mayoría de las respuestas aquí están desactualizadas. La forma en que jQuery implementa actualmente $().ready()hace que se active después de vez window.onloaden cuando.

Shikkediel

1243

El readyevento ocurre después de que se haya cargado el documento HTML, mientras que el onloadevento ocurre más tarde, cuando también se ha cargado todo el contenido (por ejemplo, imágenes).

El onloadevento es un evento estándar en el DOM, mientras que el readyevento es específico de jQuery. El propósito del readyevento es que ocurra lo antes posible después de que se haya cargado el documento, de modo que el código que agrega funcionalidad a los elementos de la página no tenga que esperar a que se cargue todo el contenido.

Guffa
fuente

153

@baptx: Estás equivocado. El readyevento es específico de jQuery. Está usando el DOMContentLoadedevento si está disponible en el navegador, de lo contrario lo emula. No existe un equivalente exacto en el DOM porque el DOMContentLoadedevento no es compatible con todos los navegadores.

Guffa

18

Ok, pero el mismo resultado existe con DOMContentLoaded, tal vez deberías haber especificado esto

baptx

55

@baptx: No pensé que fuera relevante para la pregunta, y todavía no lo hago.

Guffa

17

¿Por qué el voto negativo? Si no explica qué es lo que cree que está mal, no puede mejorar la respuesta.

Guffa

44

No hay tal evento como onload. onloades el nombre de una propiedad de objeto que almacena una función que se invocará cuando se active el loadevento.

Scott Marcus

140

window.onload es el evento JavaScript incorporado, pero como su implementación tuvo peculiaridades sutiles en los navegadores (Firefox, Internet Explorer 6, Internet Explorer 8 y Opera ), jQuery proporciona document.ready, que abstrae esos archivos y se activa tan pronto como el DOM de la página está listo (no espera imágenes, etc.)

$(document).ready(nota que es no document.ready lo es, que no está definido) es una función jQuery, que ajusta y proporciona coherencia a los siguientes eventos:

document.ondomcontentready/ document.ondomcontentloaded- un evento nuevo que se activa cuando se carga el DOM del documento (que puede pasar algún tiempo antes de que se carguen las imágenes, etc.); de nuevo, ligeramente diferente en Internet Explorer y en el resto del mundo
y window.onload(que se implementa incluso en navegadores antiguos), que se activa cuando se carga toda la página (imágenes, estilos, etc.)

Piskvor salió del edificio
fuente

16

Aquí hay una ligera idea errónea: el loadevento windowse implementa de manera razonablemente consistente en todos los navegadores. El problema que jQuery y otras bibliotecas están tratando de resolver es el que mencionó, que es que el loadevento no se activa hasta que se hayan cargado todos los recursos dependientes, como imágenes y hojas de estilo, lo que podría pasar mucho tiempo después de que el DOM se haya cargado por completo, Prestados y listos para la interacción. El evento que se dispara en la mayoría de los navegadores cuando el DOM está listo DOMContentLoaded, no se llama DOMContentReady.

Tim Down

2

@Tim Down: razonablemente es la palabra clave aquí; al menos algo de rastreo de objetos solía ser necesario, incluso con onload(hay diferencias wrt FF / IE / Opera). En cuanto a DOMContentLoaded, tienes toda la razón. Edición para aclarar.

Piskvor salió del edificio el

¿A qué tipo de olfateo de objetos te refieres?

Tim Down

1

@Tim Down: Sé que Opera lo tenía , pero el desencadenante del evento fue un poco peculiar (para desencadenar de manera confiable, document.onloadera utilizable). En lo que respecta a window.onload: window.onload = fn1;window.onload=fn2;- solo se invoca fn2 onload. Algunos webhosts gratuitos insertan su propio código en los documentos, y a veces esto golpeó el código de la página.

Piskvor salió del edificio el

1

¿No es incorrecto escribir "document.ready"? el objeto de documento no tiene un método listo, el objeto jQuery sí que se devuelve de la llamada $ (documento). Edite esta respuesta si tengo razón porque esto es muy confuso.

A. Sallai

87

$(document).ready()es un evento jQuery. JQuery's$(document).ready() llama método tan pronto como el DOM está listo (lo que significa que el navegador ha analizado el HTML y ha creado el árbol DOM). Esto le permite ejecutar código tan pronto como el documento esté listo para ser manipulado.

Por ejemplo, si un navegador admite el evento DOMContentLoaded (como lo hacen muchos navegadores que no son IE), se activará en ese evento. (Tenga en cuenta que el evento DOMContentLoaded solo se agregó a IE en IE9 +).

Se pueden usar dos sintaxis para esto:

$( document ).ready(function() {
   console.log( "ready!" );
});

O la versión abreviada:

$(function() {
   console.log( "ready!" );
});

Puntos principales para $(document).ready():

No esperará a que se carguen las imágenes.
Se usa para ejecutar JavaScript cuando el DOM está completamente cargado. Ponga controladores de eventos aquí.
Puede ser usado múltiples veces.
Reemplazar $conjQuery cuando reciba "$ no está definido".
No se usa si desea manipular imágenes. Usar en su $(window).load()lugar.

window.onload()es una función nativa de JavaScript. El window.onload()evento se activa cuando se ha cargado todo el contenido de su página, incluido el DOM (modelo de objeto de documento), anuncios publicitarios e imágenes. Otra diferencia entre los dos es que, si bien podemos tener más de una $(document).ready()función, solo podemos tener una onloadfunción.

James Drinkard
fuente

44

Punto menor: La discusión sobre IE está mal redactada. No es que IE (8 y antes) "no pueda dispararse con seguridad" hasta que el estado readyState del documento se complete, es que IE careció de un evento DOMContentLoaded. No es una cuestión de "seguridad", sino una característica que falta en IE, agregada en IE 9.

ToolmakerSteve

Tienes razón, así que edité la respuesta para reflejar tu comentario y ¡gracias!

James Drinkard

Dices "No esperará a que se carguen las imágenes". ¿Qué pasa con otros archivos, js lo más importante? A menudo, antes de llamar a la función desde otro archivo, necesito saber si está cargado.

Darius.V

Este es otro tema por completo, pero si entiendo lo que está preguntando, se basa en cómo estructura su página, incluido el orden en que coloca los archivos js. Aquí hay un enlace que entra en más detalles: ablogaboutcode.com/2011/06/14/… HTH, James

James Drinkard

¿Por qué alguien querrá usar $ (document) .ready () varias veces?

Usman

43

Un evento de carga de Windows se dispara cuando todo el contenido de su página está completamente cargado, incluido el contenido DOM (modelo de objeto de documento) y JavaScript asíncrono , marcos e imágenes . También puedes usar body onload =. Ambos son lo mismo; window.onload = function(){}y<body onload="func();"> son diferentes formas de usar el mismo evento.

El$document.ready evento de función jQuery se ejecuta un poco antes window.onloady se llama una vez que se carga el DOM (modelo de objeto de documento) en su página. No esperará a que las imágenes, los marcos se carguen completamente .

Tomado del siguiente artículo: cómo $document.ready()es diferente dewindow.onload()

Vivek
fuente

¡Creo que esta es la mejor respuesta!

Haoyu Chen

3

Podría estar de acuerdo, si no se copiara palabra por palabra.

Kevin B

23

$(document).ready(function() {

    // Executes when the HTML document is loaded and the DOM is ready
    alert("Document is ready");
});

// .load() method deprecated from jQuery 1.8 onward
$(window).on("load", function() {

     // Executes when complete page is fully loaded, including
     // all frames, objects and images
     alert("Window is loaded");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Expandir fragmento

dev4092
fuente

22

Una advertencia para usar $(document).ready()con Internet Explorer. Si una solicitud HTTP se interrumpe antes de que se cargue todo el documento (por ejemplo, mientras una página se transmite al navegador, se hace clic en otro enlace) IE activará el$(document).ready evento.

Si algún código dentro del $(document).ready()evento hace referencia a objetos DOM, existe la posibilidad de que esos objetos no se encuentren y pueden producirse errores de Javascript. Proteja sus referencias a esos objetos o difiera el código que hace referencia a esos objetos al evento window.load.

No he podido reproducir este problema en otros navegadores (específicamente, Chrome y Firefox)

cubierta
fuente

¿Qué versión de IE? Sé que debería importarme la compatibilidad, pero es difícil hacerlo con IE. ¿Es aceptable usar document.ready solo para JavaScript?

Mónica

1

IE6, 7 y 8. Ver: stackoverflow.com/questions/13185689/…

James Drinkard

22

Un pequeño consejo:

Siempre use elwindow.addEventListener para agregar un evento a la ventana. Porque de esa manera puede ejecutar el código en diferentes controladores de eventos.

Código correcto:

window.addEventListener('load', function () {
  alert('Hello!')
})

window.addEventListener('load', function () {
  alert('Bye!')
})

Expandir fragmento

Codigo invalido:

window.onload = function () {
  alert('Hello!') // it will not work!!!
}

window.onload = function () {
  alert('Bye!') 
}

Expandir fragmento

Esto se debe a que onload es solo propiedad del objeto, que se sobrescribe.

Por analogía con addEventListener, es mejor usar en $(document).ready()lugar de cargar.

Илья Зеленько
fuente

3

Esto no responde la pregunta formulada.

17

Eventos

$(document).on('ready', handler)se une al evento listo de jQuery. Se llama al controlador cuando se carga el DOM . Es posible que aún falten activos como imágenes . Nunca se llamará si el documento está listo en el momento de la encuadernación. jQuery usa DOMContentLoaded -Event para eso, emulándolo si no está disponible.

$(document).on('load', handler)es un evento que se activará una vez que se carguen todos los recursos del servidor. Las imágenes se cargan ahora. Mientras que onload es un evento HTML sin formato, jQuery construye ready .

Las funciones

$(document).ready(handler)En realidad es una promesa . Se llamará al controlador de inmediato si el documento está listo en el momento de la llamada. De lo contrario, se une al readyevento.

Antes de jQuery 1.8 , $(document).load(handler)existía como un alias para $(document).on('load',handler).

Otras lecturas

abstraktor
fuente

¿puede explicar que $ (document) .load (handler) se comporta igual que el enlace al evento de carga. A diferencia de $ .fn.ready, ¿no llamará de inmediato?

Nabeel Khan

Creo que te confundiste porque $.fn.loadeso ya no se comporta como una carpeta de eventos. De hecho, está obsoleto desde jquery 1.8. Lo actualicé en consecuencia

abstraktor

16

El $(document).ready()es un evento jQuery que ocurre cuando el documento HTML se ha cargado completamente, mientras que el window.onloadevento ocurre más tarde, cuando se carga todo, incluidas las imágenes de la página.

También window.onload es un evento javascript puro en el DOM, mientras que el $(document).ready()evento es un método en jQuery.

$(document).ready() suele ser el contenedor de jQuery para asegurarse de que todos los elementos cargados se utilicen en jQuery ...

Mire el código fuente de jQuery para comprender cómo funciona:

jQuery.ready.promise = function( obj ) {
    if ( !readyList ) {

        readyList = jQuery.Deferred();

        // Catch cases where $(document).ready() is called after the browser event has already occurred.
        // we once tried to use readyState "interactive" here, but it caused issues like the one
        // discovered by ChrisS here: http://bugs.jquery.com/ticket/12282#comment:15
        if ( document.readyState === "complete" ) {
            // Handle it asynchronously to allow scripts the opportunity to delay ready
            setTimeout( jQuery.ready );

        // Standards-based browsers support DOMContentLoaded
        } else if ( document.addEventListener ) {
            // Use the handy event callback
            document.addEventListener( "DOMContentLoaded", completed, false );

            // A fallback to window.onload, that will always work
            window.addEventListener( "load", completed, false );

        // If IE event model is used
        } else {
            // Ensure firing before onload, maybe late but safe also for iframes
            document.attachEvent( "onreadystatechange", completed );

            // A fallback to window.onload, that will always work
            window.attachEvent( "onload", completed );

            // If IE and not a frame
            // continually check to see if the document is ready
            var top = false;

            try {
                top = window.frameElement == null && document.documentElement;
            } catch(e) {}

            if ( top && top.doScroll ) {
                (function doScrollCheck() {
                    if ( !jQuery.isReady ) {

                        try {
                            // Use the trick by Diego Perini
                            // http://javascript.nwbox.com/IEContentLoaded/
                            top.doScroll("left");
                        } catch(e) {
                            return setTimeout( doScrollCheck, 50 );
                        }

                        // detach all dom ready events
                        detach();

                        // and execute any waiting functions
                        jQuery.ready();
                    }
                })();
            }
        }
    }
    return readyList.promise( obj );
};
jQuery.fn.ready = function( fn ) {
    // Add the callback
    jQuery.ready.promise().done( fn );

    return this;
};

También he creado la imagen a continuación como referencias rápidas para ambos:

Alireza
fuente

1

hermoso, referir los documentos es un punto a favor ... gracias

Irf

13

window.onload: un evento JavaScript normal.

document.ready: un evento jQuery específico cuando se ha cargado todo el HTML.

Amir Mehdi Delta
fuente

11

Una cosa para recordar (o debería decir recordar) es que no puedes apilar onloads como puedes hacerlo ready. En otras palabras, jQuery magic permite múltiples readys en la misma página, pero no puede hacerlo con onload.

El último onloadanulará cualquier onloads anterior .

Una buena manera de lidiar con eso es con una función aparentemente escrita por Simon Willison y descrita en Uso de múltiples funciones de carga de JavaScript .

function addLoadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    }
    else {
        window.onload = function() {
            if (oldonload) {
                oldonload();
            }
            func();
        }
    }
}

// Example use:
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad);
addLoadEvent(function() {
  /* More code to run on page load */
});

Donald A Nummer Jr
fuente

11

Document.ready(un evento jQuery) se activará cuando todos los elementos estén en su lugar, y se puede hacer referencia a ellos en el código JavaScript, pero el contenido no se carga necesariamente. Document.readyse ejecuta cuando se carga el documento HTML.

$(document).ready(function() {

    // Code to be executed
    alert("Document is ready");
});

Sin window.loadembargo, esperará a que la página se cargue por completo. Esto incluye marcos internos, imágenes, etc.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

Mike Clark
fuente

5

El evento document.ready ocurre cuando el documento HTML ha sido cargado, y el window.onloadevento ocurre siempre más tarde, cuando todo el contenido (imágenes, etc.) ha sido cargado.

Puede usar el document.readyevento si desea intervenir "temprano" en el proceso de renderizado, sin esperar a que se carguen las imágenes. Si necesita que las imágenes (o cualquier otro "contenido") estén listas antes de que su script "haga algo", debe esperar hasta window.onload.

Por ejemplo, si está implementando un patrón de "Presentación de diapositivas" y necesita realizar cálculos basados en tamaños de imagen, es posible que desee esperar hasta window.onload. De lo contrario, puede experimentar algunos problemas aleatorios, dependiendo de qué tan rápido se carguen las imágenes. Su script se estaría ejecutando simultáneamente con el hilo que carga imágenes. Si su script es lo suficientemente largo o el servidor es lo suficientemente rápido, es posible que no note un problema si las imágenes llegan a tiempo. Pero la práctica más segura sería permitir que las imágenes se carguen.

document.ready podría ser un buen evento para que muestres algún signo de "cargando ..." a los usuarios, y luego window.onload , puede completar cualquier script que necesite recursos cargados, y finalmente eliminar el signo "Cargando ...".

Ejemplos:

// document ready events
$(document).ready(function(){
     alert("document is ready..");
})

// using JQuery
$(function(){
   alert("document is ready..");
})

// window on load event
function myFunction(){
  alert("window is loaded..");
}
window.onload = myFunction;

Nimesh khatri
fuente

2

window.onloades una función incorporada de JavaScript. window.onloadse dispara cuando se carga la página HTML. window.onloadse puede escribir solo una vez.

document.readyes una función de la biblioteca jQuery. document.readyse dispara cuando HTML y todos los códigos JavaScript, CSS e imágenes que se incluyen en el archivo HTML están completamente cargados. document.readySe puede escribir varias veces según los requisitos.

Amit
fuente

"window.onload es una función" es incorrecto ya que @ Илья-Зеленько demuestra que es una propiedad y no una función. Detalles: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… mientras que .ready () es una función y espera un controlador.

vik

1

Cuando dices $(document).ready(f), le dices al motor de scripts que haga lo siguiente:

obtener el documento objeto y empujarlo, ya que no está en el ámbito local, debe hacer una búsqueda de tabla hash para encontrar dónde está el documento, afortunadamente, el documento está vinculado globalmente, por lo que es una búsqueda única.
encuentra el objeto $ y selecciónelo, ya que no está en el ámbito local, debe realizar una búsqueda de tabla hash, que puede tener o no colisiones.
encuentre el objeto f en el ámbito global, que es otra búsqueda de tabla hash, o presione el objeto de función e inicialícelo.
llamada readydel objeto seleccionado, que implica otra búsqueda de tabla hash en el objeto seleccionado para encontrar el método e invocarlo.
hecho.

En el mejor de los casos, se trata de 2 búsquedas de tablas hash, pero eso ignora el trabajo pesado realizado por jQuery, donde $está el sumidero de la cocina de todas las entradas posibles a jQuery, por lo que es probable que haya otro mapa para enviar la consulta al controlador correcto.

Alternativamente, puedes hacer esto:

window.onload = function() {...}

que lo hará

encuentre la ventana del objeto en el ámbito global, si JavaScript está optimizado, sabrá que, dado que la ventana no ha cambiado, ya tiene el objeto seleccionado, por lo que no es necesario hacer nada.
El objeto de función se inserta en la pila de operandos.
compruebe si onloades una propiedad o no haciendo una búsqueda de tabla hash, ya que es, se llama como una función.

En el mejor de los casos, esto cuesta una sola búsqueda de tabla hash, que es necesaria porque onloaddebe buscarse.

Idealmente, jQuery compilaría sus consultas en cadenas que se pueden pegar para hacer lo que quería que jQuery hiciera pero sin el despacho de tiempo de ejecución de jQuery. De esta manera tienes una opción de

hacer despacho dinámico de jquery como lo hacemos hoy.
haga que jQuery compile su consulta en una cadena de JavaScript pura que se puede pasar a eval para hacer lo que desee.
copie el resultado de 2 directamente en su código y omita el costo de eval.

Dmitry
fuente

0

window.onload es proporcionado por la API del DOM y dice "el evento de carga se dispara cuando se carga un recurso determinado".

"El evento de carga se dispara al final del proceso de carga del documento. En este punto, todos los objetos del documento están en el DOM y todas las imágenes, scripts, enlaces y subtramas han terminado de cargarse". Onload DOM

Pero en jQuery $ (document) .ready () solo se ejecutará una vez que la página Document Object Model (DOM) esté lista para que se ejecute el código JavaScript. Esto no incluye imágenes, scripts, iframes, etc. Evento listo para jquery

Por lo tanto, el método jquery ready se ejecutará antes que el evento dom onload.

andyCao
fuente

window.onload vs $ (documento) .ready ()

Respuestas:

Un pequeño consejo:

Eventos

Las funciones

Otras lecturas