33 Pregunta: $ (documento) .ready equivalente sin jQuery

pregunta creada en Sun, Apr 24, 2016 12:00 AM

Tengo un script que usa $(document).ready, pero no usa nada más de jQuery. Me gustaría aligerarlo eliminando la dependencia de jQuery.

¿Cómo puedo implementar mi propia funcionalidad $(document).ready sin usar jQuery? Sé que usar window.onload no será lo mismo, ya que window.onload se dispara después de que se hayan cargado todas las imágenes, marcos, etc.

    
1837
  1. ... y definitivamente no es la misma funcionalidad.
    2009-06-03 19: 39: 34Z
  2. Como esta respuesta , si todo lo que desea es jQuery es $(document).ready, puede resolver ese problema fácilmente ejecutando su código en la parte inferior de la página en lugar de en la parte superior. HTML5Boilerplate utiliza este enfoque exacto.
    2013-06-07 14: 59: 35Z
  3. 2014-07-09 16: 42: 11Z
  4. Hice mi llamada al final del documento y eso resuelve mi problema. Cuando se llama a la función, todo está cargado.
    2014-08-20 18: 12: 12Z
30 Respuestas                              30                         

Hay un reemplazo basado en estándares, DOMContentLoaded que es compatible con más de 98% de los navegadores , sin embargo no IE8:

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

La 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 );
}
    
1260
2017-03-14 01: 19: 47Z
  1. 2012-02-03 12: 42: 22Z
  2. Una implementación real de JavaScript simple y funcional aquí, si alguien quiere código, puede simplemente ingresar: stackoverflow.com /questions /9899372 /…
    2014-12-13 07: 58: 14Z
  3. El código de jQuery DOM ready parece estar simplificado: github.com/jquery/jquery/blob/master/src/core/ready.js
    2015-05-22 01: 13: 41Z
  4. Creo que todos estamos listos para pasar de IE8 ...;). Gracias por el enlace, @JoseNobile.
    2015-09-18 16: 26: 25Z
  5. DOMContentLoaded no funcionará si la secuencia de comandos se carga después. El documento JQuery listo se ejecuta siempre.
    2016-11-16 17: 03: 39Z

Editar:

Aquí hay un reemplazo viable para jQuery ready

 
function ready(callback){
    // in case the document is already rendered
    if (document.readyState!='loading') callback();
    // modern browsers
    else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
    // IE <= 8
    else document.attachEvent('onreadystatechange', function(){
        if (document.readyState=='complete') callback();
    });
}

ready(function(){
    // do something
});

tomado de https://plainjs.com/javascript/events /running-code-when-the-document-is-ready-15 /

Otra buena función de domReady aquí tomada de https://stackoverflow.com/a/9899701/175071


Como la respuesta aceptada estaba muy lejos de ser completa, combiné una función "lista" como jQuery.ready() basada en la fuente jQuery 1.6.2:

 
var ready = (function(){

    var readyList,
        DOMContentLoaded,
        class2type = {};
        class2type["[object Boolean]"] = "boolean";
        class2type["[object Number]"] = "number";
        class2type["[object String]"] = "string";
        class2type["[object Function]"] = "function";
        class2type["[object Array]"] = "array";
        class2type["[object Date]"] = "date";
        class2type["[object RegExp]"] = "regexp";
        class2type["[object Object]"] = "object";

    var ReadyObj = {
        // Is the DOM ready to be used? Set to true once it occurs.
        isReady: false,
        // A counter to track how many items to wait for before
        // the ready event fires. See #6781
        readyWait: 1,
        // Hold (or release) the ready event
        holdReady: function( hold ) {
            if ( hold ) {
                ReadyObj.readyWait++;
            } else {
                ReadyObj.ready( true );
            }
        },
        // Handle when the DOM is ready
        ready: function( wait ) {
            // Either a released hold or an DOMready/load event and not yet ready
            if ( (wait === true && !--ReadyObj.readyWait) || (wait !== true && !ReadyObj.isReady) ) {
                // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                if ( !document.body ) {
                    return setTimeout( ReadyObj.ready, 1 );
                }

                // Remember that the DOM is ready
                ReadyObj.isReady = true;
                // If a normal DOM Ready event fired, decrement, and wait if need be
                if ( wait !== true && --ReadyObj.readyWait > 0 ) {
                    return;
                }
                // If there are functions bound, to execute
                readyList.resolveWith( document, [ ReadyObj ] );

                // Trigger any bound ready events
                //if ( ReadyObj.fn.trigger ) {
                //    ReadyObj( document ).trigger( "ready" ).unbind( "ready" );
                //}
            }
        },
        bindReady: function() {
            if ( readyList ) {
                return;
            }
            readyList = ReadyObj._Deferred();

            // Catch cases where $(document).ready() is called after the
            // browser event has already occurred.
            if ( document.readyState === "complete" ) {
                // Handle it asynchronously to allow scripts the opportunity to delay ready
                return setTimeout( ReadyObj.ready, 1 );
            }

            // Mozilla, Opera and webkit nightlies currently support this event
            if ( document.addEventListener ) {
                // Use the handy event callback
                document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
                // A fallback to window.onload, that will always work
                window.addEventListener( "load", ReadyObj.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", DOMContentLoaded );

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

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

                try {
                    toplevel = window.frameElement == null;
                } catch(e) {}

                if ( document.documentElement.doScroll && toplevel ) {
                    doScrollCheck();
                }
            }
        },
        _Deferred: function() {
            var // callbacks list
                callbacks = [],
                // stored [ context , args ]
                fired,
                // to avoid firing when already doing so
                firing,
                // flag to know if the deferred has been cancelled
                cancelled,
                // the deferred itself
                deferred  = {

                    // done( f1, f2, ...)
                    done: function() {
                        if ( !cancelled ) {
                            var args = arguments,
                                i,
                                length,
                                elem,
                                type,
                                _fired;
                            if ( fired ) {
                                _fired = fired;
                                fired = 0;
                            }
                            for ( i = 0, length = args.length; i < length; i++ ) {
                                elem = args[ i ];
                                type = ReadyObj.type( elem );
                                if ( type === "array" ) {
                                    deferred.done.apply( deferred, elem );
                                } else if ( type === "function" ) {
                                    callbacks.push( elem );
                                }
                            }
                            if ( _fired ) {
                                deferred.resolveWith( _fired[ 0 ], _fired[ 1 ] );
                            }
                        }
                        return this;
                    },

                    // resolve with given context and args
                    resolveWith: function( context, args ) {
                        if ( !cancelled && !fired && !firing ) {
                            // make sure args are available (#8421)
                            args = args || [];
                            firing = 1;
                            try {
                                while( callbacks[ 0 ] ) {
                                    callbacks.shift().apply( context, args );//shifts a callback, and applies it to document
                                }
                            }
                            finally {
                                fired = [ context, args ];
                                firing = 0;
                            }
                        }
                        return this;
                    },

                    // resolve with this as context and given arguments
                    resolve: function() {
                        deferred.resolveWith( this, arguments );
                        return this;
                    },

                    // Has this deferred been resolved?
                    isResolved: function() {
                        return !!( firing || fired );
                    },

                    // Cancel
                    cancel: function() {
                        cancelled = 1;
                        callbacks = [];
                        return this;
                    }
                };

            return deferred;
        },
        type: function( obj ) {
            return obj == null ?
                String( obj ) :
                class2type[ Object.prototype.toString.call(obj) ] || "object";
        }
    }
    // The DOM ready check for Internet Explorer
    function doScrollCheck() {
        if ( ReadyObj.isReady ) {
            return;
        }

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

        // and execute any waiting functions
        ReadyObj.ready();
    }
    // Cleanup functions for the document ready method
    if ( document.addEventListener ) {
        DOMContentLoaded = function() {
            document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
            ReadyObj.ready();
        };

    } else if ( document.attachEvent ) {
        DOMContentLoaded = function() {
            // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
            if ( document.readyState === "complete" ) {
                document.detachEvent( "onreadystatechange", DOMContentLoaded );
                ReadyObj.ready();
            }
        };
    }
    function ready( fn ) {
        // Attach the listeners
        ReadyObj.bindReady();

        var type = ReadyObj.type( fn );

        // Add the callback
        readyList.done( fn );//readyList is result of _Deferred()
    }
    return ready;
})();

Cómo utilizar:

 
<script>
    ready(function(){
        alert('It works!');
    });
    ready(function(){
        alert('Also works!');
    });
</script>

No estoy seguro de qué tan funcional es este código, pero funcionó bien con mis pruebas superficiales. Esto tomó bastante tiempo, así que espero que usted y otros puedan beneficiarse de él.

PS .: sugiero compilar .

O puede usar http://dustindiaz.com/smallest-domready-ever :

 
function r(f){/in/.test(document.readyState)?setTimeout(r,9,f):f()}
r(function(){/*code to run*/});

o la función nativa si solo necesita admitir los nuevos navegadores (A diferencia de jQuery ready, esto no se ejecutará si agrega esto después de que la página se haya cargado)

 
document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/})
    
319
2018-08-29 06: 40: 48Z
  1. Oh, Dios. Pensaré muchas veces antes de eliminar la dependencia de jquery la próxima vez.
    2013-10-03 12: 15: 01Z
  2. @ Johnny_D No agregue la dependencia jQuery en primer lugar = ¡El dolor desapareció!
    2014-10-10 18: 16: 03Z
  3. @ FrederikKrautwald no importa lo que diga la gente, conceptualmente jQuery es una buena cosa, porque la API DOM es muy abultada, verbosa e inconsistente, solo deseo que sea una versión liviana estaba disponible
    2014-10-11 09: 29: 14Z
  4. @ TimoHuovinen Alternativas: Zepto.js (9.1 kb), Snack.js (8.1 kb), $dom (2.3 kb) y 140 Medley (0.5 kb). Editar: También puedes echar un vistazo a Ender.
    2014-10-11 23: 42: 05Z
  5. @ FrederikKrautwald $dom suena como lo que quisiera, pero no estoy seguro de si se ajusta a los requisitos. Zepto también se ve muy prometedor, ¡gracias por compartir!
    2014-10-13 20: 41: 59Z

Tres opciones:

  1. Si script es la última etiqueta del cuerpo, el DOM estaría listo antes de que se ejecute la etiqueta de script
  2. Cuando el DOM esté listo, "readyState" cambiará a "completo"
  3. Poner todo bajo el detector de eventos 'DOMContentLoaded'

onreadystatechange

 
  document.onreadystatechange = function () {
     if (document.readyState == "complete") {
     // document is ready. Do your stuff here
   }
 }

Fuente: MDN

DOMContentLoaded

 
document.addEventListener('DOMContentLoaded', function() {
   console.log('document is ready. I can sleep now');
});

Preocupado por los navegadores de la edad de piedra: Vaya al código fuente de jQuery y use la función ready. En ese caso, no está analizando + ejecutando toda la biblioteca que está haciendo, solo una pequeña parte de ella.

    
196
2016-04-24 11: 25: 43Z
  1. Este segundo ejemplo es mucho más elegante y conciso que las respuestas marcadas. ¿Por qué este no fue marcado como el correcto?
    2014-07-16 22: 12: 37Z
  2. Todavía +1 para el objeto DOMContentLoaded, hizo exactamente lo que quería.
    2014-09-16 10: 14: 28Z
  3. onreadystatechange hizo el truco para mí ... necesitaba ejecutar algún scriptdespués de la carga asíncrona jquery.
    2016-03-10 06: 16: 43Z
  4. Al igual que para su información, # 1 no es del todo cierto. Es bastante posible que una secuencia de comandos al final de la página se cargue antes de que se complete el DOM. Es por eso que los oyentes son superiores. Ellos escuchan cuando el navegador está listo. Ponerlo al final es cruzar los dedos de que la carga del script fue más lenta de lo que el navegador puede procesar.
    2016-10-17 14: 11: 00Z
  5. esta variante también funcionará cuando el documento ya haya terminado de cargarse, actualice su (mejor imo) respuesta si puede: if (document.readyState == 'complete' ) { en eso(); } else {document.onreadystatechange = function () {if (document.readyState == 'complete') {init (); }}}
    2017-10-17 07: 50: 08Z

Coloque su <script>/*JavaScript code*/</script> a la derecha antes de cerrar la etiqueta </body>.

Es cierto que esto podría no ser adecuado para los propósitos de todos, ya que requiere cambiar el archivo HTML en lugar de simplemente hacer algo en el archivo JavaScript a la document.ready, pero aún así ...

    
85
2016-04-24 11: 19: 37Z
  1. Me parece que hubo problemas de compatibilidad, por ejemplo, dado que la página aún no está lista, no puede hacer esto o aquello en estos y esos navegadores. Lamentablemente no puedo recordar más claramente. No obstante, +1 para una forma que sea lo suficientemente cercana en el 99% de todos los casos (y sugerido por Yahoo!).
    2009-12-07 16: 49: 51Z
  2. En realidad, colocar un elemento de script en la parte inferior de la página es una solución casi perfecta. Funciona en múltiples navegadores y simula document.ready perfect La única desventaja es que es (un poco) más intrusivo que usar algún código inteligente, tendrá que pedirle al usuario del script que está creando que agregue un fragmento de script adicional para llamar a su función ready o init.
    2011-03-11 22: 12: 10Z
  3. @ StijndeWitt - ¿Qué quiere decir con tener que llamar a una función init? Un script que usa document.ready no necesita otro código de cliente para llamarlo, es autónomo, y el equivalente a aquel donde se incluye el código al final del cuerpo también puede ser autónomo y no lo hace requiere otro código para llamarlo.
    2017-10-21 03: 39: 26Z
  4. ¿Por qué no poner el script después de la etiqueta de cierre del cuerpo, y antes de la etiqueta de cierre </html>?
    2018-04-25 19: 27: 19Z
  5. @ CharlesHolbrow Aunque todos los navegadores lo interpretarán correctamente, si quieres que sea un html válido, html la etiqueta solo debe contener head y body.
    2018-12-03 22: 56: 39Z

La solución del pobre: ​​

 
var checkLoad = function() {   
    document.readyState !== "complete" ? setTimeout(checkLoad, 11) : alert("loaded!");   
};  

checkLoad();  

Ver Fiddle

Agregado este, un poco mejor, supongo, propio alcance y no recursivo

 
(function(){
    var tId = setInterval(function() {
        if (document.readyState == "complete") onComplete()
    }, 11);
    function onComplete(){
        clearInterval(tId);    
        alert("loaded!");    
    };
})()

Ver Fiddle

    
67
2015-07-27 18: 53: 26Z
  1. @ PhilipLangford O simplemente póngalo dentro de un setInterval y elimine la recursión por completo.
    2013-05-22 17: 40: 16Z
  2. @ Raveren, hmm tienes razón, estoy bastante seguro de que lo probé cuando lo publiqué. De todos modos, solo se volvió aún más simple, ahora la función simplemente se llama, no se ajusta.
2013-12-10 03: 42: 35Z
  • Esto no es sexy. No lo siento. El uso de temporizadores /intervalos para detectar cosas puede "funcionar" pero si sigue programando de esta manera, cualquier proyecto más grande que valga la pena saldrá en picado. No trates cosas juntas como esta. Hazlo bien. Por favor. Este tipo de código afecta el ecosistema de desarrollo porque hay una mejor solución y LO SABES.
    2014-07-17 21: 35: 50Z
  • Creo que esta respuesta está mucho más cerca de dustindiaz. com /smallest-domready-ever Así que mejoré el script: jsfiddle.net/iegik/PT7x9
    2014-07-25 13: 07: 32Z
  • @ ReidBlomquist Sí, y esta es una forma "incorrecta", y eso es lo que estoy señalando (aunque un poco categóricamente, lo sé). Se podría decir que al hacerlo mal es de alguna manera "ayudar" al ecosistema, pero el problema es que con la cantidad de código erróneo que las personas toman por el código "bueno" porque no tienen la experiencia para saber nada mejor. NO ayuda al ecosistema, porque entonces tomarán ese código incorrecto y lo implementarán en una solución arquitectónica de producción real. Entonces, supongo que tendremos que diferir en la opinión sobre esta "falacia".
    2014-12-04 18: 20: 12Z
  • Yo uso esto:

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

    Nota: Esto probablemente solo funciona con los navegadores más nuevos, especialmente estos: http://caniuse.com/#feat=domcontentloaded

        
    34
    2016-04-24 11: 31: 15Z
    1. IE9 y superior en realidad
      2014-03-29 21: 04: 03Z
    2. Esto también funciona bien en los scripts de contenido de Chrome Extension si enganchó el evento document_start o document_idle.
      2019-01-31 01: 17: 07Z

    Realmente, si te importa Internet Explorer 9+ solamente , este código sería suficiente para reemplazar jQuery.ready:

     
        document.addEventListener("DOMContentLoaded", callback);
    

    Si te preocupas por Internet Explorer 6 y algunos navegadores realmente extraños y raros, esto funcionará. :

     
    domReady: function (callback) {
        // Mozilla, Opera and WebKit
        if (document.addEventListener) {
            document.addEventListener("DOMContentLoaded", callback, false);
            // If Internet Explorer, the event model is used
        } else if (document.attachEvent) {
            document.attachEvent("onreadystatechange", function() {
                if (document.readyState === "complete" ) {
                    callback();
                }
            });
            // A fallback to window.onload, that will always work
        } else {
            var oldOnload = window.onload;
            window.onload = function () {
                oldOnload && oldOnload();
                callback();
            }
        }
    },
    
        
    20
    2016-04-24 11: 41: 47Z

    Esta pregunta se hizo hace mucho tiempo. Para cualquier persona que esté viendo esta pregunta, ahora hay un sitio llamado "es posible que no necesite jquery" , que se desglosa por nivel de soporte de IE requerido: toda la funcionalidad de jquery y proporciona algunas bibliotecas alternativas más pequeñas.

    El script IE8 listo para el documento de acuerdo con es posible que no necesite jquery

     
    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();
            });
    }
    
        
    18
    2015-07-28 09: 04: 16Z
    1. Me pregunto por qué el 'onreadystatechange' es necesario en lugar de document.attachEvent('onload', fn);
      2015-10-13 21: 31: 09Z

    Recientemente estuve usando esto para un sitio móvil. Esta es la versión simplificada de John Resig de "Pro JavaScript Techniques". Depende de addEvent.

     
    var ready = ( function () {
      function ready( f ) {
        if( ready.done ) return f();
    
        if( ready.timer ) {
          ready.ready.push(f);
        } else {
          addEvent( window, "load", isDOMReady );
          ready.ready = [ f ];
          ready.timer = setInterval(isDOMReady, 13);
        }
      };
    
      function isDOMReady() {
        if( ready.done ) return false;
    
        if( document && document.getElementsByTagName && document.getElementById && document.body ) {
          clearInterval( ready.timer );
          ready.timer = null;
          for( var i = 0; i < ready.ready.length; i++ ) {
            ready.ready[i]();
          }
          ready.ready = null;
          ready.done = true;
        }
      }
    
      return ready;
    })();
    
        
    13
    2011-11-04 01: 28: 55Z
    1. Tenga cuidado con este código. NO es equivalente a $(documento) .ready. Este código activa la devolución de llamada cuando document.body está listo, lo que no garantiza que el DOM esté completamente cargado.
      2011-11-09 14: 24: 07Z

    La respuesta de jQuery fue bastante útil para mí. Con un poco de refactory se ajustaba bien a mis necesidades. Espero que ayude a alguien más.

     
    function onReady ( callback ){
        var addListener = document.addEventListener || document.attachEvent,
            removeListener =  document.removeEventListener || document.detachEvent
            eventName = document.addEventListener ? "DOMContentLoaded" : "onreadystatechange"
    
        addListener.call(document, eventName, function(){
            removeListener( eventName, arguments.callee, false )
            callback()
        }, false )
    }
    
        
    11
    2012-09-05 16: 56: 58Z
    1. en algunos navegadores, el removeListener deberá llamarse con el documento como contexto, es decir. removeListener.call(document, ...
      2013-03-19 03: 44: 41Z

    Navegador cruzado (navegadores antiguos también) y una solución simple:

     
    var docLoaded = setInterval(function () {
        if(document.readyState !== "complete") return;
        clearInterval(docLoaded);
    
        /*
            Your code goes here i.e. init()
        */
    }, 30);
    

    Mostrando alerta en jsfiddle

        
    10
    2016-05-09 18: 29: 58Z
    1. Excepto si se necesitan más de 30ms para cargar el DOM, el código no se ejecutará.
      2017-08-04 20: 29: 29Z
    2. @ Quelklef eso es setInterval no setTimeout
      2017-08-05 16: 08: 03Z
    3. Tienes razón, mi error.
      2017-08-05 16: 09: 40Z

    Aquí está el fragmento de código más pequeño para probar el DOM listo que funciona en todos los navegadores (incluso IE 8):

     
    r(function(){
        alert('DOM Ready!');
    });
    function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
    

    Vea esto responder .

        
    9
    2017-05-23 12: 34: 44Z

    Solo agrégalo al final de tu página HTML ...

     
    <script>
        Your_Function();
    </script>
    

    Porque los documentos HTML se analizan en la parte superior inferior.

        
    6
    2016-04-24 11: 23: 40Z
    1. ¿Cómo sabes que DOM se crea cuando se ejecuta este código? ¿Incluyendo CSS cargado y analizado? La API del navegador DOMContentLoaded está diseñada para eso.
      2014-11-07 07: 33: 00Z
    2. Realmente depende de lo que quiera hacer con js. Si realmente necesita ejecutar algo cuando la página ha terminado o no.
      2019-05-13 01: 54: 04Z

    Este código de navegador cruzado llamará a una función una vez que el DOM esté listo:

     
    var domReady=function(func){
        var scriptText='('+func+')();';
        var scriptElement=document.createElement('script');
        scriptElement.innerText=scriptText;
        document.body.appendChild(scriptElement);
    };
    

    Así es como funciona:

    1. La primera línea de domReady llama a toString el método de la función para obtener una representación en cadena de la función que usted pasa y la envuelve en una expresión que llama inmediatamente a la función.
    2. El resto de domReady crea un elemento de script con la expresión y lo agrega al body del documento.
    3. El navegador ejecuta etiquetas de script adjuntas a body después de que el DOM esté listo.

    Por ejemplo, si haces esto: domReady(function(){alert();});, se agregará lo siguiente al elemento body:

     
     <script>(function (){alert();})();</script>
    

    Tenga en cuenta que esto solo funciona para funciones definidas por el usuario. Lo siguiente no funcionará: domReady(alert);

        
    4
    2014-12-27 17: 04: 16Z

    Vale la pena buscar en Rock Solid addEvent () y http://www.braksator.com/how-to- Haz tu propio jquery .

    Aquí está el código en caso de que el sitio se caiga

     
    function addEvent(obj, type, fn) {
        if (obj.addEventListener) {
            obj.addEventListener(type, fn, false);
            EventCache.add(obj, type, fn);
        }
        else if (obj.attachEvent) {
            obj["e"+type+fn] = fn;
            obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
            obj.attachEvent( "on"+type, obj[type+fn] );
            EventCache.add(obj, type, fn);
        }
        else {
            obj["on"+type] = obj["e"+type+fn];
        }
    }
    
    var EventCache = function(){
        var listEvents = [];
        return {
            listEvents : listEvents,
            add : function(node, sEventName, fHandler){
                listEvents.push(arguments);
            },
            flush : function(){
                var i, item;
                for(i = listEvents.length - 1; i >= 0; i = i - 1){
                    item = listEvents[i];
                    if(item[0].removeEventListener){
                        item[0].removeEventListener(item[1], item[2], item[3]);
                    };
                    if(item[1].substring(0, 2) != "on"){
                        item[1] = "on" + item[1];
                    };
                    if(item[0].detachEvent){
                        item[0].detachEvent(item[1], item[2]);
                    };
                    item[0][item[1]] = null;
                };
            }
        };
    }();
    
    // Usage
    addEvent(window, 'unload', EventCache.flush);
    addEvent(window, 'load', function(){alert("I'm ready");});
    
        
    4
    2016-04-24 11: 28: 09Z
    1. El segundo enlace está roto.
      2016-04-24 11: 22: 40Z
    2. 2016-06-27 22: 03: 51Z

    ¿Qué hay de esta solución?

     
    // other onload attached earlier
    window.onload=function() {
       alert('test');
    };
    
    tmpPreviousFunction=window.onload ? window.onload : null;
    
    // our onload function
    window.onload=function() {
       alert('another message');
    
       // execute previous one
       if (tmpPreviousFunction) tmpPreviousFunction();
    };
    
        
    3
    2012-08-17 07: 33: 55Z
    1. Puedes usar addEventListener en la ventana con "load". Los oyentes se ejecutan uno tras otro y no necesitan el encadenamiento manual.
      2013-01-09 10: 36: 38Z
    2. Pero la carga es diferente a la lista. La 'carga' incluso ocurre antes de que el documento esté 'listo'. Un documento listo tiene su DOM cargado, una ventana cargada no tiene necesariamente el DOM listo. Buena respuesta aunque
      2013-03-30 08: 45: 51Z
    3. @ Mzn: Creo que eso es al revés. Creo que el documento listo sucede antes del evento de carga de la ventana. "En general, no es necesario esperar a que todas las imágenes se carguen por completo. Si el código se puede ejecutar antes, generalmente es mejor colocarlo en un controlador enviado al método .ready ()". ( api.jquery.com/load-event )
      2013-08-23 23: 24: 10Z
    4. esto anulará el resto de los eventos window.onload en la página y causará problemas. debería agregar un evento sobre el existente.
      2014-02-19 23: 08: 18Z
    5. El evento load puede suceder demasiado tarde. Es doloroso usarlo cuando se depende de js /images externos de terceros ... Un servidor que no responde que no controla y falla todo. Usar DOMContentLoaded no es solo una optimización, ¡también es más seguro!
      2014-12-10 22: 29: 05Z

    Siempre es bueno usar equivalentes de JavaScript en comparación con jQuery. Una de las razones es una biblioteca menos para depender y son mucho más rápidas que los equivalentes de jQuery.

    Una referencia fantástica para los equivalentes de jQuery es http://youmightnotneedjquery.com/.

    En cuanto a su pregunta, tomé el siguiente código del enlace anterior :) La única advertencia es que solo funciona con Internet Explorer 9 y versiones posteriores.

     
    function ready(fn) {
        if (document.readyState != 'loading') {
            fn();
        }
        else {
            document.addEventListener('DOMContentLoaded', fn);
        }
    }
    
        
    3
    2016-04-24 11: 45: 59Z

    Encontramos una implementación del navegador cruzado rápida y sucia que puede hacer el truco para la mayoría de los casos simples con una implementación mínima:

     
    window.onReady = function onReady(fn){
        document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
    };
    
        
    2
    2016-04-24 11: 38: 12Z
    1. ¿Qué es doc.body!?
      2016-03-09 22: 50: 35Z

    Las soluciones setTimeout /setInterval presentadas aquí solo funcionarán en circunstancias específicas.

    El problema aparece especialmente en versiones anteriores de Internet Explorer hasta 8.

    Las variables que afectan el éxito de estas soluciones setTimeout /setInterval son:

     
    1) dynamic or static HTML
    2) cached or non cached requests
    3) size of the complete HTML document
    4) chunked or non chunked transfer encoding
    

    El código original (Javascript nativo) para resolver este problema específico está aquí:

     
    https://github.com/dperini/ContentLoaded
    http://javascript.nwbox.com/ContentLoaded (test)
    

    este es el código a partir del cual el equipo de jQuery ha desarrollado su implementación.

        
    2
    2016-08-14 11: 41: 08Z

    Esto es lo que uso, es rápido y cubre todas las bases, creo; funciona para todo excepto para IE < 9.

     
    (() => { function fn() {
        // "On document ready" commands:
        console.log(document.readyState);
    };  
      if (document.readyState != 'loading') {fn()}
      else {document.addEventListener('DOMContentLoaded', fn)}
    })();
    

    Esto parece captar todos los casos:

    • se dispara inmediatamente si el DOM ya está listo (si el DOM no se está "cargando", sino "interactivo" o "completo")
    • si el DOM aún se está cargando, configura un detector de eventos para cuando el DOM está disponible (interactivo).

    El evento DOMContentLoaded está disponible en IE9 y todo lo demás, por lo que personalmente creo que está bien usar esto. Vuelva a escribir la declaración de la función de flecha en una función anónima normal si no está transpilando su código de ES2015 a ES5.

    Si desea esperar hasta que se carguen todos los recursos, se muestren todas las imágenes, etc., en su lugar use window.onload.

        
    1
    2016-07-07 13: 46: 43Z

    Si no tiene que admitir navegadores muy antiguos, esta es una forma de hacerlo incluso cuando su script externo está cargado con el atributo async :

     
    HTMLDocument.prototype.ready = new Promise(function(resolve) {
       if(document.readyState != "loading")
          resolve();
       else
          document.addEventListener("DOMContentLoaded", function() {
             resolve();
          });
    });
    
    document.ready.then(function() {
       console.log("document.ready");
    });
    
        
    1
    2017-10-22 07: 10: 31Z

    Para IE9 +:

     
    function ready(fn) {
      if (document.readyState != 'loading'){
        fn();
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }
    
        
    0
    2016-02-03 15: 20: 32Z

    Si está cargando jQuery cerca de la parte inferior de BODY, pero tiene problemas con el código que escribe jQuery (< func >) o jQuery (document) .ready (< func >), consulte jqShim en Github.

    En lugar de recrear su propia función de preparación de documentos, simplemente mantiene las funciones hasta que jQuery esté disponible y luego continúa con jQuery como se esperaba.El punto de mover jQuery a la parte inferior del cuerpo es acelerar la carga de la página, y aún puede lograrlo al insertar el jqShim.min.js en el encabezado de su plantilla.

    Terminé de escribir este código para mover todos los scripts de WordPress al pie de página, y solo este código shim ahora se encuentra directamente en el encabezado.

        
    0
    2016-04-24 11: 32: 54Z

    Este enfoque es el camino más corto que se me ocurre.

    La solución basada en el evento DOMContentLoaded solo funciona si el script se carga antes que el documento, mientras que la comprobación perezosa sugerida aquí garantiza que el código se ejecute siempre, incluso en los scripts que se carguen dinámicamente más tarde, exactamente como el documento de JQuery listo. /p>

    Este código es compatible con todos los navegadores (incluidos algunos heredados, hasta IE6 y Safari para Windows).

     
    (function ready() {
        if (!document.body) {setTimeout(ready, 50); return;}
        // Document is ready here
    })();
    
        
    0
    2016-10-18 12: 57: 07Z

    La función ready en jQuery hace varias cosas. Francamente, no veo ese punto de reemplazarlo a menos que tenga un resultado sorprendentemente pequeño de su sitio web. jQuery es una biblioteca bastante pequeña, y maneja todo tipo de cosas de navegador cruzado que necesitarás más adelante.

    De todos modos, no tiene mucho sentido publicarlo aquí, simplemente abre jQuery y observa el método bindReady.

    Comienza llamando al document.addEventListener("DOMContentLoaded") o al document.attachEvent('onreadystatechange') según el modelo de evento, y continúa desde allí.

        
    0
    2017-12-18 20: 07: 42Z

    Prueba esto:

     
    function ready(callback){
        if(typeof callback === "function"){
            document.addEventListener("DOMContentLoaded", callback);
            window.addEventListener("load", callback);
        }else{
            throw new Error("Sorry, I can not run this!");
        }
    }
    ready(function(){
        console.log("It worked!");
    });
    
        
    0
    2018-05-27 16: 11: 24Z
     
    function onDocReady(fn){ 
        $d.readyState!=="loading" ? fn():document.addEventListener('DOMContentLoaded',fn);
    }
    
    function onWinLoad(fn){
        $d.readyState==="complete") ? fn(): window.addEventListener('load',fn);
    } 
    

    onDocReady proporciona una devolución de llamada cuando el dom HTML está listo para acceder /parse /manipular completamente.

    onWinLoad proporciona una devolución de llamada cuando todo se ha cargado (imágenes, etc.)

    • Estas funciones se pueden llamar cuando quieras.
    • Soporta múltiples "oyentes".
    • Funcionará en cualquier navegador.
    0
    2018-05-28 22: 50: 17Z
     
    (function(f){
      if(document.readyState != "loading") f();
      else document.addEventListener("DOMContentLoaded", f);
    })(function(){
      console.log("The Document is ready");
    });
    
        
    0
    2018-11-27 21: 40: 42Z
    1. ¿Qué agrega esto que las otras respuestas no?
      2018-11-28 00: 56: 54Z
    2. Utiliza un cierre autocontenido (no llena el alcance global de la "ventana"), funciona en todos los navegadores y es muy compacto. No veo ninguna otra respuesta como esta.
      2018-11-28 15: 56: 07Z
    3. También funciona incluso después de que el DOM ya se haya cargado (como hace jQuery.ready), que la mayoría de estas respuestas no pueden hacer.
      2018-11-28 15: 56: 52Z

    La mayoría de las funciones JS Ready de vainilla NO consideran el escenario donde el controlador DOMContentLoaded está configurado después de el documento ya está cargado, lo que significa que la función nunca se ejecutará . Esto puede suceder si busca DOMContentLoaded dentro de un async external script (<script async src="file.js"></script>).

    El código a continuación comprueba DOMContentLoaded solo si el documento readyState todavía no es interactive o complete.

     
    var DOMReady = function(callback) {
      document.readyState === "interactive" || document.readyState === "complete" ? callback() : document.addEventListener("DOMContentLoaded", callback());
    };
    DOMReady(function() {
      //DOM ready!
    });
    

    Si quieres apoyar IE también:

     
    var DOMReady = function(callback) {
        if (document.readyState === "interactive" || document.readyState === "complete") {
            callback();
        } else if (document.addEventListener) {
            document.addEventListener('DOMContentLoaded', callback());
        } else if (document.attachEvent) {
            document.attachEvent('onreadystatechange', function() {
                if (document.readyState != 'loading') {
                    callback();
                }
            });
        }
    };
    
    DOMReady(function() {
      // DOM ready!
    });
    
        
    0
    2019-04-12 16: 12: 44Z

    Esta fue una buena https://stackoverflow.com/a/11810957/185565 la solución del hombre pobre. Un comentario consideró un contador para rescatar en caso de emergencia. Esta es mi modificación.

     
    function doTheMagic(counter) {
      alert("It worked on " + counter);
    }
    
    // wait for document ready then call handler function
    var checkLoad = function(counter) {
      counter++;
      if (document.readyState != "complete" && counter<1000) {
        var fn = function() { checkLoad(counter); };
        setTimeout(fn,10);
      } else doTheMagic(counter);
    };
    checkLoad(0);
    
        
    - 1
    2017-05-23 11: 55: 00Z
    fuente colocada aquí