¿Cuál es el equivalente no-jQuery de '$ (document) .ready ()'?

¿Cuál es el equivalente de no jQuery de $(document).ready()?

Lo bueno de esto $(document).ready()es que dispara antes window.onload. La función de carga espera hasta que todo se carga, incluidos los activos externos y las imágenes. $(document).ready, sin embargo, se dispara cuando el árbol DOM está completo y puede manipularse. Si desea obtener DOM listo, sin jQuery, puede registrarse en esta biblioteca. Alguien extrajo solo la readyparte de jQuery. Es agradable y pequeño y puede que te resulte útil:

domready en Google Code

Esto funciona perfectamente, de ECMA

document.addEventListener("DOMContentLoaded", function() {
  // code...
});

El window.onloadno es igual a JQuery $(document).readyporque $(document).readysolo espera al árbol DOM mientras window.onloadverifica todos los elementos, incluidos los activos externos y las imágenes.

EDITAR : Se agregó IE8 y su equivalente anterior, gracias a la observación de Jan Derk . Puede leer la fuente de este código en MDN en este enlace :

// alternative to DOMContentLoaded
document.onreadystatechange = function () {
    if (document.readyState == "interactive") {
        // Initialize your application or run some code.
    }
}

Hay otras opciones aparte de "interactive". Vea el enlace de MDN para más detalles.

Una cosita que armé

domready.js

(function(exports, d) {
  function domReady(fn, context) {

    function onReady(event) {
      d.removeEventListener("DOMContentLoaded", onReady);
      fn.call(context || exports, event);
    }

    function onReadyIe(event) {
      if (d.readyState === "complete") {
        d.detachEvent("onreadystatechange", onReadyIe);
        fn.call(context || exports, event);
      }
    }

    d.addEventListener && d.addEventListener("DOMContentLoaded", onReady) ||
    d.attachEvent      && d.attachEvent("onreadystatechange", onReadyIe);
  }

  exports.domReady = domReady;
})(window, document);

Cómo usarlo

<script src="domready.js"></script>
<script>
  domReady(function(event) {
    alert("dom is ready!");
  });
</script>

También puede cambiar el contexto en el que se ejecuta la devolución de llamada pasando un segundo argumento

function init(event) {
  alert("check the console");
  this.log(event);
}

domReady(init, console);

Ahora que es 2018, aquí hay un método rápido y simple.

Esto agregará un detector de eventos, pero si ya se activó, comprobaremos que el dom esté listo o que esté completo. Esto puede activarse antes o después de que los recursos secundarios hayan terminado de cargarse (imágenes, hojas de estilo, marcos, etc.).

function domReady(fn) {
  // If we're early to the party
  document.addEventListener("DOMContentLoaded", fn);
  // If late; I mean on time.
  if (document.readyState === "interactive" || document.readyState === "complete" ) {
    fn();
  }
}

domReady(() => console.log("DOM is ready, come and get it!"));

Lecturas adicionales

• https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded
  • Comprobando si la carga ya está completa
• https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState

Actualizar

Aquí hay algunos ayudantes de utilidad rápida que usan ES6 Import & Export estándar que escribí que también incluyen TypeScript. Tal vez pueda hacer que estos sean una biblioteca rápida que se pueda instalar en proyectos como una dependencia.

JavaScript

export const domReady = (callBack) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

Mecanografiado

export const domReady = (callBack: () => void) => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', callBack);
  }
  else {
    callBack();
  }
}

export const windowReady = (callBack: () => void) => {
  if (document.readyState === 'complete') {
    callBack();
  }
  else {
    window.addEventListener('load', callBack);
  }
}

Promesas

export const domReady = new Promise(resolve => {
  if (document.readyState === "loading") {
    document.addEventListener('DOMContentLoaded', resolve);
  }
  else {
    resolve();
  }
});

export const windowReady = new Promise(resolve => {
  if (document.readyState === 'complete') {
    resolve();
  }
  else {
    window.addEventListener('load', resolve);
  }
});

De acuerdo con http://youmightnotneedjquery.com/#ready, un buen reemplazo que todavía funciona con IE8 es

function ready(fn) {
  if (document.readyState != 'loading') {
    fn();
  } else if (document.addEventListener) {
    document.addEventListener('DOMContentLoaded', fn);
  } else {
    document.attachEvent('onreadystatechange', function() {
      if (document.readyState != 'loading')
        fn();
    });
  }
}

// test
window.ready(function() {
    alert('it works');
});

mejoras : Personalmente, también verificaría si el tipo de fnes una función. Y como @elliottregan sugirió eliminar el detector de eventos después de su uso.

La razón por la que respondo esta pregunta tarde es porque estaba buscando esta respuesta pero no pude encontrarla aquí. Y creo que esta es la mejor solución.

Hay un reemplazo basado en estándares, DOMContentLoaded , que es compatible con más del 90% de los navegadores, pero no con IE8 (por lo tanto, el siguiente código lo usa JQuery para el soporte del navegador) :

document.addEventListener("DOMContentLoaded", function(event) { 
  //do work
});

Función nativa de jQuery es mucho más complicada que solo window.onload, como se muestra a continuación.

function bindReady(){
    if ( readyBound ) return;
    readyBound = true;

    // Mozilla, Opera and webkit nightlies currently support this event
    if ( document.addEventListener ) {
        // Use the handy event callback
        document.addEventListener( "DOMContentLoaded", function(){
            document.removeEventListener( "DOMContentLoaded", arguments.callee, false );
            jQuery.ready();
        }, false );

    // If IE event model is used
    } else if ( document.attachEvent ) {
        // ensure firing before onload,
        // maybe late but safe also for iframes
        document.attachEvent("onreadystatechange", function(){
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", arguments.callee );
                jQuery.ready();
            }
        });

        // If IE and not an iframe
        // continually check to see if the document is ready
        if ( document.documentElement.doScroll && window == window.top ) (function(){
            if ( jQuery.isReady ) return;

            try {
                // If IE is used, use the trick by Diego Perini
                // http://javascript.nwbox.com/IEContentLoaded/
                document.documentElement.doScroll("left");
            } catch( error ) {
                setTimeout( arguments.callee, 0 );
                return;
            }

            // and execute any waiting functions
            jQuery.ready();
        })();
    }

    // A fallback to window.onload, that will always work
    jQuery.event.add( window, "load", jQuery.ready );
}

En JavaScript simple, sin bibliotecas? Es un error$es simplemente un identificador y no está definido a menos que lo defina.

jQuery define $como su propio "objeto todo" (también conocido como jQuerypara que pueda usarlo sin entrar en conflicto con otras bibliotecas). Si no está utilizando jQuery (o alguna otra biblioteca que lo defina), $no se definirá.

¿O pregunta cuál es el equivalente en JavaScript simple? En ese caso, probablemente desee window.onload, que no es exactamente equivalente, pero es la forma más rápida y fácil de acercarse al mismo efecto en JavaScript de vainilla.

La forma más fácil en los navegadores recientes sería utilizar los GlobalEventHandlers apropiados , onDOMContentLoaded , onload , onloadeddata (...)

onDOMContentLoaded = (function(){ console.log("DOM ready!") })()

onload = (function(){ console.log("Page fully loaded!") })()

onloadeddata = (function(){ console.log("Data loaded!") })()

El evento DOMContentLoaded 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 subtramas finalicen la carga. Se debe usar una carga de evento muy diferente solo para detectar una página completamente cargada. Es un error increíblemente popular usar load donde DOMContentLoaded sería mucho más apropiado, así que tenga cuidado.

https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded

La función utilizada es un IIFE, muy útil en este caso, ya que se activa cuando está listo:

https://en.wikipedia.org/wiki/Immediately-invoked_function_expression

Obviamente, es más apropiado colocarlo al final de cualquier script.

En ES6, también podemos escribirlo como una función de flecha:

onload = (() => { console.log("ES6 page fully loaded!") })()

Lo mejor es usar los elementos DOM, podemos esperar a que cualquier variable esté lista, que desencadenará un IIFE con flecha.

El comportamiento será el mismo, pero con menos impacto en la memoria.

footer = (() => { console.log("Footer loaded!") })()

<div id="footer">

En muchos casos, el objeto del documento también se activa cuando está listo , al menos en mi navegador. La sintaxis es muy buena, pero necesita más pruebas sobre compatibilidades.

document=(()=>{    /*Ready*/   })()

El cuerpo onLoad también podría ser una alternativa:

<html>
<head><title>Body onLoad Exmaple</title>

<script type="text/javascript">
    function window_onload() {
        //do something
    }
</script>

</head>
<body onLoad="window_onload()">

</body>
</html>