body - window.onload javascript

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

Question

¿Cuáles son las diferencias entre el método window.onload y jQuery''s $(document).ready() JavaScript?

Answer 1

Eventos

$(document).on(''ready'', handler) enlaza con el evento ready de jQuery. Se llama al controlador cuando se carga el DOM . Activos como imágenes tal vez todavía faltan . Nunca se llamará si el documento está listo en el momento de la encuadernación. jQuery usa el DOMContentLoaded DOMContentLoaded para eso, emulándolo si no está disponible.

$(document).on(''load'', handler) es un evento que se activará una vez que todos los recursos se carguen desde el servidor. Las imágenes se cargan ahora. Si bien onload es un evento HTML sin formato, ready está creado por jQuery.

Funciones

$(document).ready(handler) realidad es una promise . Se llamará al manejador inmediatamente si el documento está listo en el momento de la llamada. De lo contrario se enlaza con el ready -Evento.

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

Otras lecturas

• La temporización
• ready
• Un ejemplo
• promise
• El alias de evento eliminado

Answer 2

Un pequeño consejo:

Siempre use window.addEventListener para agregar un evento a la ventana. Porque de esa manera puedes ejecutar el código en diferentes manejadores de eventos.

Código correcto:

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

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

Codigo invalido:

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

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

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

Answer 3

Cuando dice $(document).ready(f) , le indica al motor de script que haga lo siguiente:

1. obtenga el documento objeto y empújelo, 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 para que sea una búsqueda simple.
2. encuentre el objeto $ y selecciónelo, ya que no está en el ámbito local, debe hacer una búsqueda de tabla hash, que puede o no tener colisiones.
3. encuentre el objeto f en el ámbito global, que es otra búsqueda de tabla hash, u objeto de función push e inicialícelo.
4. ready llamada del objeto seleccionado, que implica otra búsqueda de tabla hash en el objeto seleccionado para encontrar el método e invocarlo.
5. hecho.

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

Alternativamente, podrías hacer esto:

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

que lo hará

1. encuentre la ventana del objeto en el ámbito global, si el JavaScript está optimizado, sabrá que, dado que no se ha cambiado la ventana, ya tiene el objeto seleccionado, por lo que no hay que hacer nada.
2. objeto de función se empuja en la pila de operandos.
3. verifique si onload es 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 se debe buscar la carga.

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

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

Answer 4

El $(document).ready() es un evento jQuery que ocurre cuando el documento HTML se ha cargado completamente, mientras que el evento window.onload se produce más tarde, cuando todo lo que incluye imágenes en la página se carga.

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

$(document).ready() suele ser el contenedor de jQuery para asegurarse de que todos los elementos cargados se usen 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 una referencia rápida para ambos:

Answer 5

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

El evento onload es un evento estándar en el DOM, mientras que el evento ready es específico de jQuery. El propósito del evento ready es que debe ocurrir lo antes posible después de que el documento se haya cargado, 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.

Answer 6

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

Puede usar el evento document.ready 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 el script "haga algo", debe esperar hasta que 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 que window.onload . De lo contrario, es posible que experimente algunos problemas aleatorios, según la velocidad con que se carguen las imágenes. Su script se ejecutará simultáneamente con el hilo que carga las imágenes. Si la secuencia de comandos es lo suficientemente larga 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 evento agradable para que muestres algún signo de "carga ..." a los usuarios, y con window.onload , puedes completar cualquier secuencia de comandos que requiera la carga de los recursos, y luego eliminar el "Cargando ..." firmar.

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;

Answer 7

Se desencadena un evento de carga de Windows 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 iguales; window.onload = function(){} y <body onload="func();"> son formas diferentes de usar el mismo evento.

El evento de la función jQuery $document.ready se ejecuta un poco antes que window.onload y 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 de window.onload()

Answer 8

Una advertencia sobre el uso de $(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 evento $(document).ready .

Si cualquier código dentro del evento $(document).ready() referencia a objetos DOM, existe la posibilidad de que no se encuentren esos objetos y pueden ocurrir errores de Javascript. Guarde 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)

Answer 9

Una cosa para recordar (o debo decir que recordar) es que no puede apilar onload s como puede hacerlo con ready . En otras palabras, jQuery magic permite múltiples ready preparación en la misma página, pero no puedes hacer eso con onload .

La última onload anulará cualquier s onload anterior.

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

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 */
});

Answer 10

$(document).ready() es un evento jQuery. El método $(document).ready() JQuery se llama 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 hacen muchos navegadores que no son IE), se activará 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 taquigráfica:

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

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

• No esperará a que se carguen las imágenes.
• Se utiliza para ejecutar JavaScript cuando el DOM está completamente cargado. Pon los manejadores de eventos aquí.
• Puede ser usado múltiples veces.
• Reemplace $ con jQuery cuando reciba "$ no está definido".
• No se utiliza si desea manipular imágenes. Use $(window).load() lugar.

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

Answer 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 está necesariamente cargado. Document.ready ejecuta cuando se carga el documento HTML.

$(document).ready(function() {

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

Sin embargo, el window.load 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");
});

Answer 12

window.onload es el evento de JavaScript incorporado, pero como su implementación tenía ciertas peculiaridades en los navegadores (Firefox, Internet Explorer 6, Internet Explorer 8 y Opera ), jQuery proporciona document.ready , que los retira, y se activa tan pronto como sea posible. ya que el DOM de la página está listo (no espera las imágenes, etc.).

$(document).ready (tenga en cuenta que no es document.ready , que no está definido) es una función jQuery, que se 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.)

Answer 13

window.onload es una función incorporada en JavaScript. window.onload disparador cuando la página HTML cargada. window.onload se puede escribir solo una vez.

document.ready es una función de la biblioteca jQuery. document.ready activa cuando el HTML y todo el código JavaScript, CSS e imágenes que se incluyen en el archivo HTML están completamente cargados. document.ready se puede escribir varias veces según los requisitos.

Answer 14

window.onload: Un evento normal de JavaScript.

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

Answer 15

$(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>