Perbedaan antara fungsi $ (window) .load () dan $ (document) .ready ()

216

Apa perbedaan antara $(window).load(function() {})dan $(document).ready(function() {})di jQuery?

jquery Satya
sumber

Jawaban:

266
  • document.readyadalah acara jQuery, ini berjalan ketika DOM siap, mis. semua elemen ada untuk ditemukan / digunakan, tetapi tidak harus semua konten .
  • window.onloadkebakaran nanti (atau pada saat yang sama dalam kasus terburuk / gagal) ketika gambar dan semacamnya dimuat, jadi jika Anda menggunakan dimensi gambar misalnya, Anda sering ingin menggunakan ini sebagai gantinya.
Nick Craver
sumber
38
singkatan untuk $(document).ready(function(){})ini $(function(){})dan perbedaan penting lain dari window.load adalah bahwa hal itu akan berjalan pada semua panggilan masa depan fungsi, bahkan setelah DOMready awal.
Michael Butler
2
@dbliss Ya saya percaya onload adalah singkatan $(window).on('load'). Keduanya merujuk acara memuat .
Lancer Gratis
5
@MichaelButler - Apa maksudmu it will run on ALL future calls of the function?
BornToCode
7
@MichaelButler: Anda harus lebih jelas dalam komentar Anda. 1) Anda berbicara tentang PENGGUNA yang mengeksekusi lebih banyak $(document).readykode setelah DOM siap. Itu kasus penggunaan kecil sehingga mungkin tidak layak membingungkan semua orang dengan menyebutkannya. 2) LINGKUNGAN hanya menelepon $(document).ready(f‌​unction(){})satu kali, ketika DOM siap. Jika pengguna, karena alasan tertentu, mengeksekusi lebih banyak $(document).readysetelah DOM siap, maka ya, itu akan dieksekusi segera.
Doug S
4
Saya mohon berbeda, Michael. Kita tinggalkan saja ini dan tidak menurunkan komentar yang tidak berguna. Setidaknya orang-orang yang bingung sekarang memiliki jawaban mereka.
Doug S
73 
$(document).ready(function() {
 // executes when HTML-Document is loaded and DOM is ready
 alert("document is ready");
});


$(window).load(function() {
 // executes when complete page is fully loaded, including all frames, objects and images
 alert("window is loaded");
});
SagarPPanchal
sumber
22

The $(window).load()TIDAK tersedia di jQuery 3.0

$( window ).load(function() {
        // Handler for .load() called.
});

Untuk menyiasatinya, Anda dapat menggunakannya sebagai "Lampiran Handler Lampiran" 

$( window ).on("load", function() {
        // Handler for .load() called.
});
Kean Amaral
sumber
14

Perbedaannya adalah:

$(document).ready(function() { adalah jQuery event yang dipecat ketika DOM dimuat, jadi dipecat ketika struktur dokumen siap.

$(window).load() acara dipecat setelah seluruh konten dimuat.

Bharat Chodvadiya
sumber
9 
<html>
<head>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
    $( document ).ready(function() {
        alert( "document loaded" );
    });

    $( window ).load(function() {
        alert( "window loaded" );
    });
    </script>
</head>
<body>
    <iframe src="http://stackoverflow.com"></iframe>
</body>
</html>

window.load akan dipicu setelah semua konten iframe dimuat

Shaik Rasool
sumber
7

$(document).ready terjadi ketika semua elemen hadir di DOM, tetapi tidak harus semua konten.

$(document).ready(function() {
    alert("document is ready");
});

window.onloadatau $(window).load()terjadi setelah semua sumber daya konten (gambar, dll) telah dimuat.

$(window).load(function() {
    alert("window is loaded");
});
Purvik Dhorajiya
sumber
0

document.ready (jQuery) document.ready akan mengeksekusi tepat setelah dokumen HTML dimuat properti, dan DOM siap.

DOM: Document Object Model (DOM) adalah konvensi lintas-platform dan bahasa-independen untuk mewakili dan berinteraksi dengan objek dalam dokumen HTML, XHTML dan XML.

$(document).ready(function()
{
   // executes when HTML-Document is loaded and DOM is ready
   alert("(document).ready was called - document is ready!");
});

window.load (JavaScript Bawaan) Bawaan) Akan tetapi window.load akan menunggu halaman dimuat penuh, ini termasuk frame bagian dalam, gambar dll. * window.load adalah metode JavaScript bawaan, diketahui memiliki beberapa kebiasaan di browser lama (IE6, IE8, FF lama dan versi Opera) tetapi umumnya akan bekerja di semuanya.

window.load dapat digunakan dalam acara onload tubuh seperti ini (tapi saya sangat menyarankan Anda menghindari pencampuran kode seperti ini di HTML, karena nanti akan menjadi sumber kebingungan):

$(window).load(function() 
{
   // executes when complete page is fully loaded, including all frames, objects and images
   alert("(window).load was called - window is loaded!");
});
Arun Kumar
sumber
0

$ (window) .load adalah peristiwa yang menyala ketika DOM dan semua konten (semuanya) di halaman dimuat sepenuhnya seperti CSS, gambar, dan bingkai. Salah satu contoh terbaik adalah jika kita ingin mendapatkan ukuran gambar yang sebenarnya atau untuk mendapatkan detail dari apa pun yang kita gunakan.

$ (dokumen) .ready () menunjukkan bahwa kode di dalamnya perlu dieksekusi setelah DOM dimuat dan siap untuk dimanipulasi oleh skrip. Ini tidak akan menunggu gambar dimuat untuk mengeksekusi skrip jQuery.

<script type = "text/javascript">
    //$(window).load was deprecated in 1.8, and removed in jquery 3.0
    // $(window).load(function() {
    //     alert("$(window).load fired");
    // });

    $(document).ready(function() {
        alert("$(document).ready fired");
    });
</script>

$ (window) .load dipecat setelah $ (dokumen) .ready ().

$ (window) .load sudah tidak digunakan lagi di 1.8, dan dihapus di jquery 3.0

Srikrushna
sumber
0

Saya pikir $(window).loadacara ini tidak didukung oleh JQuery 3.x

pengguna8816619
sumber
1
Sesuai dokumentasi, acara $ (window) .load telah dihapus di JQuery 3.0
Mathieu VIALES
1
Ini benar. Untuk menyiasatinya, Anda dapat menggunakannya sebagai "Lampiran Penangan Event": $ (window) .on ("load", function () {// Handler for .load () dipanggil.});
Kean Amaral
0

Menurut DOM Level 2 Acara, loadacara ini seharusnya menyala document, bukan menyala window. Namun, loaddiimplementasikan pada windowsemua browser untuk kompatibilitas ke belakang.

Jones Agyemang
sumber