Perbedaan antara DOMContentLoaded dan memuat acara

Apa perbedaan antara DOMContentLoadeddan loadperistiwa?

Dari Pusat Pengembang Mozilla :

Acara DOMContentLoaded dipecat ketika dokumen telah dimuat dan diuraikan sepenuhnya, tanpa menunggu stylesheet, gambar, dan subframe untuk menyelesaikan pemuatan (peristiwa pemuatan dapat digunakan untuk mendeteksi halaman yang dimuat penuh).

The DOMContentLoadedacara akan api segera hirarki DOM telah sepenuhnya dibangun, loadacara akan melakukannya ketika semua gambar dan sub-frame memiliki pemuatan selesai.

DOMContentLoadedakan bekerja pada sebagian besar browser modern, tetapi tidak pada IE termasuk IE9 dan di atasnya. Ada beberapa solusi untuk meniru acara ini di versi IE yang lebih lama, seperti yang digunakan di perpustakaan jQuery, mereka melampirkan acara khusus IE onreadystatechange .

Lihat perbedaannya sendiri:

DEMO

Dari Microsoft IE

Acara DOMContentLoaded menyala ketika parsing halaman saat ini selesai; acara pemuatan menyala ketika semua file selesai memuat dari semua sumber, termasuk iklan dan gambar. DOMContentLoaded adalah acara yang hebat untuk digunakan untuk menghubungkan fungsionalitas UI ke halaman web yang kompleks.

Dari Jaringan Pengembang Mozilla

Acara DOMContentLoaded dipecat ketika dokumen telah dimuat dan diuraikan sepenuhnya, tanpa menunggu stylesheet, gambar, dan subframe untuk menyelesaikan pemuatan (peristiwa pemuatan dapat digunakan untuk mendeteksi halaman yang dimuat penuh).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Halaman tidak dapat dimanipulasi dengan aman sampai dokumen "siap." jQuery mendeteksi kondisi kesiapan ini untuk Anda. Kode yang disertakan dalam $ (dokumen) .ready () hanya akan berjalan setelah halaman Document Object Model (DOM) siap untuk dieksekusi kode JavaScript. Kode yang termasuk dalam $ (window) .load (function () {...}) akan berjalan setelah seluruh halaman (gambar atau iframe), bukan hanya DOM, siap.

Lihat: http://learn.jquery.com/using-jquery-core/document-ready/

• domContentLoaded : menandai titik ketika kedua DOM siap dan tidak ada stylesheet yang memblokir eksekusi JavaScript - artinya kita sekarang dapat (berpotensi) membangun pohon render. Banyak kerangka kerja JavaScript menunggu acara ini sebelum mulai menjalankan logikanya sendiri. Karena alasan ini browser menangkap cap waktu EventStart dan EventEnd untuk memungkinkan kami melacak berapa lama waktu yang diperlukan untuk eksekusi ini.

• loadEvent : sebagai langkah terakhir di setiap halaman memuat browser akan mengaktifkan "onload" yang dapat memicu logika aplikasi tambahan.

sumber

Inilah beberapa kode yang berfungsi untuk kita. Kami menemukan MSIE terkena dan luput DomContentLoaded, tampaknya ada beberapa penundaan ketika tidak ada sumber daya tambahan di-cache (hingga 300 ms berdasarkan pada logging konsol kami), dan itu memicu terlalu cepat ketika mereka di-cache. Jadi kami terpaksa mundur untuk MISE. Anda juga ingin memicu doStuff()fungsi apakah DomContentLoadedmemicu sebelum atau setelah file JS eksternal Anda.

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}