Saya memiliki skrip yang menggunakan $(document).ready, tetapi tidak menggunakan apa pun dari jQuery. Saya ingin meringankannya dengan menghapus ketergantungan jQuery.

Bagaimana saya bisa mengimplementasikan $(document).readyfungsionalitas saya sendiri tanpa menggunakan jQuery? Saya tahu bahwa menggunakan window.onloadtidak akan sama, seperti window.onloadkebakaran setelah semua gambar, bingkai, dll. Dimuat.

Ada pengganti berbasis standar, DOMContentLoadedyang didukung oleh lebih dari 98% browser , meskipun tidak IE8:

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

Fungsi asli jQuery jauh lebih rumit dari sekedar window.onload, seperti yang digambarkan di bawah ini.

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

Edit:

Berikut ini adalah pengganti jQuery yang layak

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

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

Fungsi domReady lain yang baik di sini diambil dari https://stackoverflow.com/a/9899701/175071

Karena jawaban yang diterima sangat jauh dari lengkap, saya menjahit fungsi "siap" seperti jQuery.ready()berdasarkan sumber 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;
})();

Cara Penggunaan:

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

Saya tidak yakin seberapa fungsional kode ini, tetapi berfungsi baik dengan tes yang dangkal saya. Ini memakan waktu cukup lama, jadi saya harap Anda dan orang lain dapat memperoleh manfaat darinya.

PS: Saya sarankan kompilasi itu.

Atau Anda dapat menggunakan http://dustindiaz.com/smallest-domready-ever :

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

atau fungsi asli jika Anda hanya perlu mendukung browser baru (Tidak seperti jQuery ready, ini tidak akan berjalan jika Anda menambahkan ini setelah halaman dimuat)

document.addEventListener('DOMContentLoaded',function(){/*fun code to run*/})

Tiga opsi:

1. Jika scripttag terakhir dari badan, DOM akan siap sebelum tag skrip dieksekusi
2. Ketika DOM siap, "readyState" akan berubah menjadi "complete"
3. Letakkan semuanya di bawah pendengar acara 'DOMContentLoaded'

onreadystatechange

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

Sumber: MDN

DOMContentLoaded

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

Khawatir tentang browser zaman batu: Buka kode sumber jQuery dan gunakanreadyfungsinya. Dalam hal ini Anda tidak memparsing + mengeksekusi seluruh perpustakaan yang Anda lakukan hanya sebagian kecil saja.

Tempatkan <script>/*JavaScript code*/</script>tepat sebelum </body> tag penutup .

Memang, ini mungkin tidak sesuai dengan tujuan semua orang karena itu membutuhkan mengubah file HTML daripada hanya melakukan sesuatu dalam file JavaScript a la document.ready, tapi masih ...

Solusi orang miskin:

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

checkLoad();  

Lihat Fiddle

Ditambahkan yang satu ini, sedikit lebih baik kurasa, memiliki cakupan sendiri, dan tidak rekursif

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

Lihat Fiddle

Saya menggunakan ini:

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

Catatan: Ini mungkin hanya berfungsi dengan browser yang lebih baru, terutama ini: http://caniuse.com/#feat=domcontentloaded

Sungguh, jika Anda hanya peduli dengan Internet Explorer 9+ , kode ini akan cukup untuk menggantikan jQuery.ready:

    document.addEventListener("DOMContentLoaded", callback);

Jika Anda khawatir tentang Internet Explorer 6 dan beberapa browser yang sangat aneh dan langka, ini akan berfungsi:

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();
        }
    }
},

Pertanyaan ini sudah lama ditanyakan. Bagi siapa pun yang hanya melihat pertanyaan ini, sekarang ada situs yang disebut "Anda mungkin tidak perlu jquery" yang rusak - sesuai tingkat dukungan IE yang diperlukan - semua fungsi jquery dan menyediakan beberapa perpustakaan alternatif yang lebih kecil.

Skrip siap dokumen IE8 menurut Anda mungkin tidak perlu 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();
        });
}

Baru-baru ini saya menggunakan ini untuk situs seluler. Ini adalah versi sederhana John Resig dari "Teknik JavaScript Pro". Itu tergantung pada 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;
})();

Peramban silang (peramban lama juga) dan solusi sederhana:

var docLoaded = setInterval(function () {
    if(document.readyState !== "complete") return;
    clearInterval(docLoaded);

    /*
        Your code goes here i.e. init()
    */
}, 30);

Menampilkan lansiran di jsfiddle

Jawaban jQuery cukup berguna bagi saya. Dengan sedikit pengilangan itu sesuai dengan kebutuhan saya. Saya harap ini membantu orang lain.

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 )
}

Berikut ini cuplikan kode terkecil untuk menguji DOM ready yang berfungsi di semua browser (bahkan IE 8):

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

Lihat ini jawaban .

Cukup tambahkan ini ke bagian bawah halaman HTML Anda ...

<script>
    Your_Function();
</script>

Karena, dokumen HTML diuraikan oleh atas-bawah.

Layak dicari di Rock Solid addEvent () dan http://www.braksator.com/how-to-make-your-own-jquery .

Berikut adalah kode jika situs turun

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");});

Kode lintas-peramban ini akan memanggil fungsi setelah DOM siap:

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

Begini cara kerjanya:

1. Baris pertama domReadymemanggil toStringmetode fungsi untuk mendapatkan representasi string dari fungsi yang Anda berikan dan membungkusnya dalam ekspresi yang segera memanggil fungsi.
2. Sisa dari domReadymembuat elemen skrip dengan ekspresi dan menambahkannya kebody dokumen.
3. Browser menjalankan tag skrip ditambahkan bodysetelah DOM siap.

Misalnya, jika Anda melakukan ini domReady(function(){alert();});:, berikut ini akan ditambahkan ke bodyelemen:

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

Perhatikan bahwa ini hanya berfungsi untuk fungsi yang ditentukan pengguna. Berikut ini tidak akan berfungsi:domReady(alert);

Ini tahun 2020 dan <script>tag memiliki deferatribut.

sebagai contoh:

<script src="demo_defer.js" defer></script>

itu menentukan bahwa skrip dieksekusi ketika halaman telah selesai parsing.

https://www.w3schools.com/tags/att_script_defer.asp

Bagaimana dengan solusi ini?

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

Itu selalu baik untuk menggunakan setara JavaScript dibandingkan dengan jQuery. Salah satu alasannya adalah satu perpustakaan lebih sedikit untuk bergantung dan mereka jauh lebih cepat daripada setara jQuery.

Salah satu referensi fantastis untuk setara jQuery adalah http://youmightnotneedjquery.com/ .

Sejauh pertanyaan Anda prihatin, saya mengambil kode di bawah ini dari tautan di atas :) Hanya peringatan apakah itu hanya bekerja dengan Internet Explorer 9 dan yang lebih baru.

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

Paling minimal dan 100% berfungsi

Saya telah mengambil jawaban dari PlainJS dan itu berfungsi dengan baik untuk saya. Itu meluas DOMContentLoadedsehingga dapat diterima di semua browser.

Fungsi ini setara dengan $(document).ready()metode jQuery :

document.addEventListener('DOMContentLoaded', function(){
    // do something
});

Namun, berbeda dengan jQuery, kode ini hanya akan berjalan dengan baik di browser modern (IE> 8) dan itu tidak akan terjadi jika dokumen sudah dirender pada saat skrip ini disisipkan (misalnya melalui Ajax). Karena itu, kita perlu sedikit memperluas ini:

function run() {
    // do something
}

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

Ini pada dasarnya mencakup semua kemungkinan dan merupakan pengganti yang layak untuk pembantu jQuery.

Kami menemukan penerapan lintas peramban kami yang cepat dan kotor yang dapat melakukan trik untuk kebanyakan kasus sederhana dengan penerapan minimal:

window.onReady = function onReady(fn){
    document.body ? fn() : setTimeout(function(){ onReady(fn);},50);
};

Solusi setTimeout / setInterval yang disajikan di sini hanya akan berfungsi dalam keadaan tertentu.

Masalahnya muncul terutama di versi Internet Explorer yang lebih lama hingga 8.

Variabel yang mempengaruhi keberhasilan solusi setTimeout / setInterval ini adalah:

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

kode asli (Javascript asli) yang menyelesaikan masalah khusus ini ada di sini:

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

ini adalah kode dari mana tim jQuery membangun implementasi mereka.

Inilah yang saya gunakan, cepat dan mencakup semua basis yang saya pikir; bekerja untuk semuanya kecuali IE <9.

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

Ini sepertinya menangkap semua kasus:

• segera menyala jika DOM sudah siap (jika DOM tidak "memuat", tetapi "interaktif" atau "lengkap")
• jika DOM masih memuat, itu mengatur pendengar acara ketika DOM tersedia (interaktif).

Acara DOMContentLoaded tersedia di IE9 dan yang lainnya, jadi saya pribadi berpikir tidak masalah untuk menggunakan ini. Tulis ulang deklarasi fungsi panah ke fungsi anonim biasa jika Anda tidak mengubah kode dari ES2015 ke ES5.

Jika Anda ingin menunggu sampai semua aset dimuat, semua gambar ditampilkan dll, kemudian gunakan window.onload.

Jika Anda tidak harus mendukung browser yang sangat lama, berikut adalah cara untuk melakukannya bahkan ketika skrip eksternal Anda dimuat dengan atribut 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");
});

Untuk IE9 +:

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

Jika Anda memuat jQuery di dekat bagian bawah BODY, tetapi mengalami masalah dengan kode yang menuliskan jQuery (<func>) atau jQuery (dokumen) .ready (<func>), periksa jqShim di Github.

Alih-alih membuat ulang fungsi siap dokumennya sendiri, ia hanya memegang fungsi-fungsi tersebut sampai jQuery tersedia kemudian dilanjutkan dengan jQuery seperti yang diharapkan. Inti memindahkan jQuery ke bagian bawah tubuh adalah untuk mempercepat pemuatan halaman, dan Anda masih bisa mencapainya dengan menambahkan jqShim.min.js di kepala template Anda.

Saya akhirnya menulis kode ini untuk memindahkan semua skrip di WordPress ke footer, dan kode shim ini sekarang berada langsung di header.

Coba ini:

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!");
});

function onDocReady(fn){ 
    $d.readyState!=="loading" ? fn():document.addEventListener('DOMContentLoaded',fn);
}

function onWinLoad(fn){
    $d.readyState==="complete") ? fn(): window.addEventListener('load',fn);
} 

onDocReady memberikan panggilan balik ketika dom HTML siap untuk sepenuhnya mengakses / mengurai / memanipulasi.

onWinLoad memberikan panggilan balik ketika semuanya telah dimuat (gambar dll)

• Fungsi-fungsi ini dapat dipanggil kapan saja Anda inginkan.
• Mendukung banyak "pendengar".
• Akan berfungsi di browser apa pun.

(function(f){
  if(document.readyState != "loading") f();
  else document.addEventListener("DOMContentLoaded", f);
})(function(){
  console.log("The Document is ready");
});

Sebagian besar fungsi JS Ready vanilla TIDAK mempertimbangkan skenario di mana DOMContentLoadedhandler diatur setelah dokumen sudah dimuat - Yang berarti fungsi tidak akan pernah berjalan . Ini dapat terjadi jika Anda mencari di DOMContentLoadeddalam asyncskrip eksternal (<script async src="file.js"></script> ).

Kode di bawah ini memeriksa DOMContentLoadedhanya jika dokumen readyStatebelum interactiveatau complete.

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

Jika Anda ingin mendukung IE juga:

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!
});

Saya hanya menggunakan:

setTimeout(function(){
    //reference/manipulate DOM here
});

Dan tidak document.addEventListener("DOMContentLoaded" //etcseperti pada jawaban paling atas, ia bekerja sejauh IE9 - http://caniuse.com/#search=DOMContentLoaded hanya menunjukkan baru-baru ini sebagai IE11.

Menariknya saya menemukan setTimeoutsolusi ini pada tahun 2009: Apakah memeriksa kesiapan DOM berlebihan?, yang mungkin bisa dikatakan sedikit lebih baik, seperti yang saya maksudkan "apakah itu berlebihan untuk menggunakan berbagai pendekatan kerangka kerja yang lebih rumit untuk memeriksa kesiapan DOM".

Penjelasan terbaik saya untuk mengapa teknik ini bekerja adalah bahwa, ketika skrip dengan setTimeout telah tercapai, DOM sedang diurai, jadi eksekusi kode dalam setTimeout ditunda sampai operasi selesai.