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

Jawaban:

1243

The readyperistiwa terjadi setelah dokumen HTML telah dimuat, sedangkan onloadperistiwa terjadi kemudian, ketika semua konten (misalnya gambar) juga telah dimuat.

The onloadevent adalah peristiwa standar dalam DOM, sedangkan readyacara khusus untuk jQuery. Tujuan readyacara adalah bahwa itu harus terjadi sedini mungkin setelah dokumen dimuat, sehingga kode yang menambahkan fungsionalitas ke elemen-elemen di halaman tidak harus menunggu semua konten dimuat.

Guffa
sumber
153
@aptx: Anda salah. The readyevent ini khusus untuk jQuery. Itu menggunakan DOMContentLoadedacara jika tersedia di browser, jika tidak meniru itu. Tidak ada padanan yang pasti dalam DOM karena DOMContentLoadedacara tersebut tidak didukung di semua browser.
Guffa
18
Ok tapi hasil yang sama ada dengan DOMContentLoaded, mungkin Anda harus menentukan ini
baptx
55
@aptx: Saya tidak berpikir itu relevan dengan pertanyaan, dan saya masih belum.
Guffa
17
Mengapa downvote? Jika Anda tidak menjelaskan apa yang Anda pikir salah, itu tidak dapat memperbaiki jawabannya.
Guffa
4
Tidak ada acara seperti itu onload. onloadadalah nama properti objek yang menyimpan fungsi yang akan dipanggil ketika loadacara dipicu.
Scott Marcus
140

window.onloadadalah acara JavaScript bawaan, tetapi karena implementasinya memiliki kebiasaan yang tidak kentara di seluruh peramban (Firefox, Internet Explorer 6, Internet Explorer 8, dan Opera ), jQuery menyediakan document.ready, yang mengabstraksikan mereka yang pergi, dan langsung menyala begitu DOM laman siap (tidak menunggu gambar, dll.)

$(document).ready(perhatikan bahwa ini bukan document.ready , yang tidak ditentukan) adalah fungsi jQuery, membungkus dan memberikan konsistensi pada peristiwa berikut:

  • document.ondomcontentready/ document.ondomcontentloaded- peristiwa agak baru yang muncul ketika DOM dokumen dimuat (yang mungkin beberapa waktu sebelum gambar, dll. dimuat); lagi, sedikit berbeda di Internet Explorer dan di seluruh dunia
  • dan window.onload(yang diterapkan bahkan di browser lama), yang menyala ketika seluruh halaman dimuat (gambar, gaya, dll.)
Piskvor meninggalkan gedung
sumber
16
Ada sedikit kesalahpahaman di sini: loadacara windowdiimplementasikan cukup konsisten di seluruh browser. Masalah yang coba diselesaikan oleh jQuery dan perpustakaan lain adalah yang Anda sebutkan, yaitu bahwa loadacara tersebut tidak diaktifkan hingga semua sumber daya dependen seperti gambar dan stylesheet dimuat, yang bisa lama setelah DOM dimuat sepenuhnya, diberikan dan siap untuk interaksi. Acara yang menyala di sebagian besar browser saat DOM siap disebut DOMContentLoaded, bukan DOMContentReady.
Tim Down
2
@Tim Down: cukup adalah kata kunci di sini; setidaknya beberapa objek mengendus dulu diperlukan, bahkan dengan onload(ada perbedaan wrt FF / IE / Opera). Adapun DOMContentLoaded, Anda sepenuhnya benar. Editing untuk mengklarifikasi.
Piskvor meninggalkan gedung
Apa jenis objek mengendus yang Anda maksud?
Tim Down
1
@Tim Down: Saya tahu Opera memilikinya , tetapi pemicu acara di atasnya sedikit aneh (untuk memicu andal, document.onloaddapat digunakan). Sejauh window.onload berjalan: window.onload = fn1;window.onload=fn2;- hanya fn2 yang akan dipanggil onload. Beberapa hosting gratis memasukkan kode mereka sendiri ke dalam dokumen, dan kadang-kadang ini melanggar kode halaman.
Piskvor meninggalkan gedung
1
Bukankah menulis "dokumen. Sudah" salah? objek dokumen tidak memiliki metode siap, objek jQuery melakukan itu dikembalikan dari panggilan $ (dokumen). Harap edit jawaban ini jika saya benar karena ini sangat membingungkan.
A. Sallai
87

$(document).ready()adalah acara jQuery. $(document).ready()Metode JQuery dipanggil segera setelah DOM siap (yang berarti bahwa browser telah mem-parsing HTML dan membangun pohon DOM). Ini memungkinkan Anda untuk menjalankan kode segera setelah dokumen siap dimanipulasi.

Misalnya, jika peramban mendukung acara DOMContentLoaded (seperti yang dilakukan banyak peramban non-IE), maka peramban itu akan diaktifkan pada acara itu. (Perhatikan bahwa acara DOMContentLoaded hanya ditambahkan ke IE di IE9 +.)

Dua sintaks dapat digunakan untuk ini: 

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

Atau versi singkat:

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

Poin utama untuk $(document).ready():

  • Ini tidak akan menunggu gambar dimuat.
  • Digunakan untuk menjalankan JavaScript ketika DOM dimuat sepenuhnya. Letakkan event handler di sini.
  • Dapat digunakan beberapa kali.
  • Ganti $dengan jQueryketika Anda menerima "$ tidak ditentukan."
  • Tidak digunakan jika Anda ingin memanipulasi gambar. Gunakan $(window).load()sebagai gantinya.

window.onload()adalah fungsi JavaScript asli. The window.onload()peristiwa kebakaran ketika semua konten pada halaman Anda telah dimuat, termasuk DOM (dokumen model objek), iklan banner dan gambar. Perbedaan lain antara keduanya adalah bahwa, sementara kita dapat memiliki lebih dari satu $(document).ready()fungsi, kita hanya dapat memiliki satu onloadfungsi.

James Drinkard
sumber
4
Poin minor: Pembicaraan tentang IE adalah kata-kata yang buruk. Bukan berarti IE (8 dan sebelumnya) "tidak dapat menembak dengan aman" sampai readyState dokumen mencapai selesai, itu adalah bahwa IE tidak memiliki peristiwa DOMContentLoaded. Bukan masalah "keamanan", tetapi fitur yang hilang di IE, ditambahkan di IE 9.
ToolmakerSteve
Anda benar, jadi saya mengedit jawaban untuk mencerminkan komentar dan terima kasih Anda!
James Drinkard
Anda mengatakan "Itu tidak akan menunggu gambar dimuat." bagaimana dengan file lain, js yang paling penting? Seringkali sebelum memanggil fungsi dari file lain - Saya perlu tahu apakah itu dimuat.
Darius.V
Ini adalah topik lain sama sekali, tetapi jika saya mengerti apa yang Anda tanyakan, ini didasarkan pada bagaimana Anda menyusun halaman Anda, termasuk urutan apa yang Anda tempatkan file js. Berikut ini tautan yang menjelaskan lebih detail: ablogaboutcode.com/2011/06/14/... HTH, James
James Drinkard
Mengapa seseorang ingin menggunakan $ (dokumen) .ready () beberapa kali?
Usman
43

Sebuah Windows beban peristiwa kebakaran ketika semua konten pada halaman Anda sepenuhnya dimuat termasuk DOM (dokumen model objek) konten dan asynchronous JavaScript , frame dan gambar . Anda juga dapat menggunakan body onload =. Keduanya sama; window.onload = function(){}dan <body onload="func();">berbagai cara menggunakan acara yang sama.

$document.readyAcara fungsi jQuery dijalankan sedikit lebih awal dari window.onloaddan dipanggil setelah DOM (model objek Dokumen) dimuat pada halaman Anda. Itu tidak akan menunggu untuk gambar, bingkai untuk memuat sepenuhnya .

Diambil dari artikel berikut: apa $document.ready()bedanya denganwindow.onload()

Vivek
sumber
Saya pikir ini adalah jawaban terbaik!
Haoyu Chen
3
Saya mungkin setuju, jika itu tidak disalin kata demi kata.
Kevin B
23 

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

dev4092
sumber
22

Kata hati-hati saat menggunakan $(document).ready()dengan Internet Explorer. Jika permintaan HTTP terputus sebelum seluruh dokumen dimuat (misalnya, saat halaman mengalir ke browser, tautan lain diklik) IE akan memicu $(document).readyacara.

Jika ada kode dalam $(document).ready()acara yang mereferensikan objek DOM, ada potensi untuk objek tersebut tidak ditemukan, dan kesalahan Javascript dapat terjadi. Baik menjaga referensi Anda ke objek-objek itu, atau menunda kode yang merujuk objek-objek tersebut ke acara window.load.

Saya belum dapat mereproduksi masalah ini di browser lain (khususnya, Chrome dan Firefox)

Kartu
sumber
Versi IE yang mana? Saya tahu saya harus peduli tentang kompatibilitas, tetapi sulit dengan IE. Apakah bisa diterima menggunakan dokumen. Sudah hanya untuk JavaScript?
Monica
1
IE6, 7, dan 8. Lihat: stackoverflow.com/questions/13185689/…
James Drinkard
22

Sedikit tip:

Selalu gunakan window.addEventListeneruntuk menambahkan acara ke jendela. Karena dengan begitu Anda dapat mengeksekusi kode di berbagai penangan acara.

Kode yang benar:

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

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

Kode salah:

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

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

Ini karena onload hanyalah properti dari objek, yang ditimpa.

Dengan analogi dengan addEventListener, lebih baik menggunakan $(document).ready()daripada membebani.

Илья Зеленько
sumber
3
Ini tidak menjawab pertanyaan yang diajukan.
17

Acara

$(document).on('ready', handler)mengikat ke acara siap dari jQuery. Pawang dipanggil saat DOM dimuat . Aset seperti gambar mungkin masih hilang . Itu tidak akan pernah dipanggil jika dokumen siap pada saat mengikat. jQuery menggunakan DOMContentLoaded -Event untuk itu, meniru jika tidak tersedia.

$(document).on('load', handler)adalah peristiwa yang akan dipecat setelah semua sumber daya dimuat dari server. Gambar dimuat sekarang. Sementara onload adalah acara HTML mentah, ready dibangun oleh jQuery.

Fungsi

$(document).ready(handler)sebenarnya adalah janji . Pawang akan dipanggil segera jika dokumen siap pada saat menelepon. Kalau tidak, ia mengikat ke ready-Event.

Sebelum jQuery 1.8 , $(document).load(handler)ada sebagai alias untuk $(document).on('load',handler).

Bacaan lebih lanjut

abstraktor
sumber
dapatkah Anda jelaskan $ (dokumen) .load (penangan) berperilaku sama seperti mengikat ke acara-beban. Tidak seperti $ .fn. Sudah, ia tidak akan segera menelepon?
Nabeel Khan
Saya pikir Anda bingung karena $.fn.loaditu tidak berlaku sebagai pengikat acara lagi. Bahkan, itu sudah usang sejak jquery 1.8. Saya memperbaruinya sesuai
abstraktor
16

Ini $(document).ready()adalah acara jQuery yang terjadi ketika dokumen HTML telah dimuat penuh, sedangkan window.onloadacara terjadi nanti, ketika semuanya termasuk gambar pada halaman dimuat.

Juga window.onload adalah peristiwa javascript murni di DOM, sedangkan $(document).ready()acara adalah metode di jQuery.

$(document).ready() biasanya pembungkus untuk jQuery untuk memastikan semua elemen dimuat untuk digunakan dalam jQuery ...

Lihatlah ke kode sumber jQuery untuk memahami cara kerjanya:

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

Saya juga telah membuat gambar di bawah ini sebagai referensi cepat untuk keduanya:

masukkan deskripsi gambar di sini

Alireza
sumber
1
cantik, merujuk dokumen adalah poin plus .. thnx
Irf
13

window.onload: Peristiwa JavaScript normal.

document.ready: Peristiwa jQuery tertentu ketika seluruh HTML telah dimuat.

Amir Mehdi Delta
sumber
11

Satu hal yang perlu diingat (atau harus saya katakan recall) adalah Anda tidak bisa menumpuk onloadseperti yang Anda bisa lakukan ready. Dengan kata lain, sihir jQuery memungkinkan beberapa readys pada halaman yang sama, tetapi Anda tidak dapat melakukannya dengan onload.

Yang terakhir onloadakan menolak semua yang sebelumnya onload.

Cara yang bagus untuk mengatasinya adalah dengan fungsi yang tampaknya ditulis oleh salah satu dari Simon Willison dan dijelaskan dalam Menggunakan Berbagai Fungsi JavaScript Onload .

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 */
});
Donald A Nummer Jr
sumber
11

Document.ready(acara jQuery) akan diaktifkan ketika semua elemen berada di tempatnya, dan mereka dapat direferensikan dalam kode JavaScript, tetapi konten belum tentu dimuat. Document.readydieksekusi ketika dokumen HTML dimuat.

$(document).ready(function() {

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

The window.loadnamun akan menunggu halaman yang akan dimuat sepenuhnya. Ini termasuk bingkai bagian dalam, gambar, dll.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});
Mike Clark
sumber
5

Peristiwa document.ready sudah terjadi ketika dokumen HTML telah dimuat, dan window.onloadacara terjadi selalu nanti, ketika semua konten (gambar, dll) telah dimuat.

Anda dapat menggunakan document.readyacara jika Anda ingin melakukan intervensi "awal" dalam proses rendering, tanpa menunggu gambar dimuat. Jika Anda membutuhkan gambar (atau "konten" lainnya) siap sebelum skrip Anda "melakukan sesuatu", Anda harus menunggu sampai window.onload.

Misalnya, jika Anda menerapkan pola "Peragaan Slide", dan Anda perlu melakukan perhitungan berdasarkan ukuran gambar, Anda mungkin ingin menunggu hingga window.onload. Jika tidak, Anda mungkin mengalami beberapa masalah acak, tergantung pada seberapa cepat gambar akan dimuat. Script Anda akan berjalan bersamaan dengan utas yang memuat gambar. Jika skrip Anda cukup panjang, atau servernya cukup cepat, Anda mungkin tidak melihat masalah, jika gambar tiba tepat waktu. Tetapi praktik paling aman adalah membiarkan gambar dimuat.

document.readybisa menjadi acara yang menyenangkan bagi Anda untuk menunjukkan beberapa tanda "memuat ..." kepada pengguna, dan setelah itu window.onload, Anda dapat menyelesaikan skrip yang memerlukan sumber daya dimuat, dan akhirnya menghapus tanda "Memuat ...".

Contoh: -

// 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;
Nimesh khatri
sumber
2

window.onloadadalah fungsi bawaan JavaScript. window.onloadmemicu ketika halaman HTML dimuat. window.onloaddapat ditulis hanya sekali.

document.readyadalah fungsi dari perpustakaan jQuery. document.readyterpicu ketika HTML dan semua kode JavaScript, CSS, dan gambar yang termasuk dalam file HTML dimuat sepenuhnya. document.readydapat ditulis beberapa kali sesuai dengan persyaratan.

Amit
sumber
"window.onload is a function" tidak benar karena @ Илья-Зеленько menunjukkan itu adalah properti dan bukan fungsi. Detail: developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/… sedangkan .ready () adalah fungsi dan mengharapkan penangan.
vik
1

Ketika Anda mengatakan $(document).ready(f), Anda memberi tahu mesin skrip untuk melakukan hal berikut:

  1. dapatkan dokumen objek dan dorong, karena tidak dalam cakupan lokal, ia harus melakukan pencarian tabel hash untuk menemukan di mana dokumen berada, untungnya dokumen terikat secara global sehingga hanya pencarian tunggal.
  2. menemukan objek $dan memilihnya, karena tidak dalam lingkup lokal, ia harus melakukan pencarian tabel hash, yang mungkin atau mungkin tidak memiliki tabrakan.
  3. temukan objek f dalam lingkup global, yang merupakan pencarian tabel hash lain, atau tekan fungsi objek dan inisialisasi.
  4. panggilan readyobjek yang dipilih, yang melibatkan pencarian tabel hash lain ke objek yang dipilih untuk menemukan metode dan memohonnya.
  5. selesai

Dalam kasus terbaik, ini adalah 2 tabel hash lookup, tapi itu mengabaikan pekerjaan berat yang dilakukan oleh jQuery, di mana $kitchen sink dari semua input yang mungkin untuk jQuery, jadi peta lain kemungkinan ada untuk mengirimkan kueri ke handler yang benar.

Atau, Anda bisa melakukan ini:

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

yang mana akan

  1. menemukan jendela objek dalam lingkup global, jika JavaScript dioptimalkan, ia akan tahu bahwa karena jendela tidak berubah, ia sudah menjadi objek yang dipilih, jadi tidak ada yang perlu dilakukan.
  2. objek fungsi didorong pada tumpukan operan.
  3. periksa apakah onloadproperti atau tidak dengan melakukan pencarian tabel hash, karena itu, itu disebut seperti fungsi.

Dalam kasus terbaik, ini membutuhkan pencarian tabel hash tunggal, yang diperlukan karena onloadharus diambil.

Idealnya, jQuery akan mengkompilasi kueri mereka ke string yang dapat ditempelkan untuk melakukan apa yang Anda inginkan jQuery tetapi tanpa runtime dispatching dari jQuery. Dengan cara ini Anda memiliki opsi untuk keduanya

  1. lakukan pengiriman jquery secara dinamis seperti yang kita lakukan hari ini.
  2. minta jQuery mengkompilasi permintaan Anda ke string JavaScript murni yang dapat diteruskan ke eval untuk melakukan apa yang Anda inginkan.
  3. salin hasil 2 langsung ke kode Anda, dan lewati biaya eval.
Dmitry
sumber
0

window.onload disediakan oleh DOM api dan ia mengatakan "acara memuat menyala ketika sumber daya yang diberikan telah dimuat".

"Acara memuat diaktifkan pada akhir proses pemuatan dokumen. Pada titik ini, semua objek dalam dokumen berada di DOM, dan semua gambar, skrip, tautan, dan sub-bingkai telah selesai dimuat." DOM memuat

Tetapi dalam jQuery $ (document) .ready () hanya akan berjalan setelah halaman Document Object Model (DOM) siap untuk dieksekusi kode JavaScript. Ini tidak termasuk gambar, skrip, iframe dll. Jquery ready event

Jadi metode siap jquery akan berjalan lebih awal dari acara dom onload.

andyCao
sumber