jQuery - Apa perbedaan antara $ (dokumen) .ready dan $ (window) .load?

Apa perbedaan di antara keduanya

$(document).ready(function(){
 //my code here
});

dan

$(window).load(function(){
  //my code here
});

Dan saya ingin memastikan bahwa:

$(document).ready(function(){

}) 

dan

$(function(){

}); 

dan

jQuery(document).ready(function(){

});

adalah sama.

Bisakah Anda memberi tahu saya apa perbedaan dan persamaan di antara mereka?

$(document).ready(function() {
  // executes when HTML-Document is loaded and DOM is ready
  console.log("document is ready");
});


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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Versi kueri 3.0

Perubahan pemecahan: .load (), .unload (), dan .error () dihapus

Metode ini adalah pintasan untuk operasi acara, tetapi memiliki beberapa batasan API. .load()Metode acara bertentangan dengan .load() metode ajax . The .error()Metode tidak dapat digunakan dengan window.onerror karena cara metode DOM didefinisikan. Jika Anda perlu melampirkan acara dengan nama-nama ini, gunakan .on()metode ini, mis. Ubah $("img").load(fn)ke $(img).on("load", fn). ¹

$(window).load(function() {});

Harus diubah menjadi

$(window).on('load', function (e) {})

Ini semua setara:

$(function(){
}); 

jQuery(document).ready(function(){
});

$(document).ready(function(){
});

$(document).on('ready', function(){
})

document.readyadalah acara jQuery, ini berjalan ketika DOM siap, mis. semua elemen ada untuk ditemukan / digunakan, tetapi tidak harus semua konten.
window.onloadkebakaran kemudian (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.

Baca juga pertanyaan terkait:
Perbedaan antara fungsi $ (window) .load () dan $ (document) .ready ()

Dari Dokumen API jQuery

Sementara JavaScript menyediakan loadacara untuk mengeksekusi kode ketika halaman diberikan, acara ini tidak dipicu sampai semua aset seperti gambar telah sepenuhnya diterima. Dalam kebanyakan kasus, skrip dapat dijalankan segera setelah hierarki DOM telah dibangun sepenuhnya. Pawang yang diteruskan ke .ready()dijamin akan dieksekusi setelah DOM siap, jadi ini biasanya tempat terbaik untuk melampirkan semua penangan acara lainnya dan menjalankan kode jQuery lainnya. Saat menggunakan skrip yang mengandalkan nilai properti gaya CSS, penting untuk mereferensikan stylesheet eksternal atau elemen gaya embed sebelum merujuk skrip.

Dalam kasus di mana kode bergantung pada aset yang dimuat (misalnya, jika dimensi gambar diperlukan), kode tersebut harus ditempatkan dalam penangan untuk loadacara tersebut.

Jawab pertanyaan kedua -

Tidak, mereka identik selama Anda tidak menggunakan jQuery dalam mode tidak konflik.

Tiga fungsi ini sama.

$(document).ready(function(){

}) 

dan

$(function(){

}); 

dan

jQuery(document).ready(function(){

});

di sini $digunakan untuk define jQuerylike $= jQuery.

Sekarang perbedaannya adalah itu

$(document).readyadalah acara jQuery yang dipecat saat DOMdimuat, jadi dipecat saat struktur dokumen siap.

$(window).load acara dipecat setelah seluruh konten dimuat seperti halaman berisi gambar, css dll.

Perbedaan antara $(document).ready()dan $(window).load()fungsinya adalah bahwa kode yang termasuk di dalamnya $(window).load()akan berjalan setelah seluruh halaman (gambar, iframe, stylesheet, dll) dimuat sedangkan acara siap dokumen menyala sebelum semua gambar, iframe dll dimuat, tetapi setelah seluruh DOM itu sendiri siap.

$(document).ready(function(){

}) 

dan

$(function(){

});

dan

jQuery(document).ready(function(){

});

Tidak ada perbedaan antara 3 kode di atas.

Mereka setara, tetapi Anda mungkin menghadapi konflik jika Kerangka JavaScript lainnya menggunakan simbol dolar yang sama $ sebagai nama pintasan.

jQuery.noConflict();
jQuery.ready(function($){
 //Code using $ as alias to jQuery
});

Acara siap selalu dijalankan pada satu-satunya halaman html dimuat ke browser dan fungsi dieksekusi .... Tapi acara memuat dieksekusi pada saat semua konten halaman dimuat ke browser untuk halaman ... .. kita bisa menggunakan $ atau jQuery ketika kita menggunakan metode noconflict () dalam skrip jquery ...

$(document).ready(function(e) { 
    // executes when HTML-Document is loaded and DOM is ready  
    console.log("page is loading now"); 
});

$(document).load(function(e) { 
    //when html page complete loaded
    console.log("completely loaded"); 
});

$ (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 ().

$(document).ready(function(){

}) 
//and 
$(function(){

}); 
//and
jQuery(document).ready(function(){

});

Di atas 3 sama, $ adalah nama alias jQuery, Anda mungkin menghadapi konflik jika JavaScript Frameworks lainnya menggunakan simbol dolar yang sama $. Jika Anda menghadapi konflik, tim jQuery memberikan solusi tanpa konflik, baca lebih lanjut.

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