jQuery - $ (document) .ready ve $ (window) .load arasındaki farklar nelerdir?

Arasındaki farklar nelerdir

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

ve

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

Ve emin olmak istiyorum:

$(document).ready(function(){

}) 

ve

$(function(){

}); 

ve

jQuery(document).ready(function(){

});

aynıdır.

Aralarındaki farkları ve benzerlikleri söyleyebilir misiniz?

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

Sorgu 3.0 sürümü

Değişiklik kırılıyor: .load (), .unload () ve .error () kaldırıldı

Bu yöntemler olay işlemleri için kısayollardır, ancak birkaç API sınırlaması vardır. Olay .load()yöntemi, ajax .load() yöntemiyle çakıştı . .error()Yöntem ile kullanılamadı window.onerror için DOM yöntemi tanımlanır yolu. Eğer bu isimler tarafından olayları takmak gerekirse, kullanmak .on()örn yöntemi, değişiklik $("img").load(fn)için $(img).on("load", fn). ¹

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

Olarak değiştirilmelidir

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

Bunların hepsi eşdeğerdir:

$(function(){
}); 

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

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

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

document.ready bir jQuery olayıdır, DOM hazır olduğunda çalışır, örn. tüm öğeler bulunacak / kullanılacaktır, ancak tüm içerik zorunlu olmayabilir.
window.onloadresimler ve benzerleri yüklendiğinde daha sonra (veya aynı zamanda en kötü / başarısız durumlarda) patlar. Dolayısıyla, örneğin görüntü boyutlarını kullanıyorsanız, bunun yerine bunu sık sık kullanmak istersiniz.

İlgili bir soruyu da okuyun:
$ (window) .load () ve $ (document) .ready () işlevleri arasındaki fark

Gönderen jQuery API Belgesi

JavaScript, loadbir sayfa oluşturulduğunda kod yürütmek için etkinlik sağlarken , resimler gibi tüm öğeler tamamen alınana kadar bu etkinlik tetiklenmez. Çoğu durumda, komut dosyası DOM hiyerarşisi tamamen oluşturulduğu anda çalıştırılabilir. İşleyici geçti.ready() DOM hazır olduktan sonra yürütülmesi garanti edilir, bu nedenle bu genellikle diğer tüm olay işleyicilerini eklemek ve diğer jQuery kodunu çalıştırmak için en iyi yerdir. CSS stil özelliklerinin değerine dayanan komut dosyaları kullanırken, komut dosyalarına başvurmadan önce harici stil sayfalarına veya gömme stil öğelerine başvurmak önemlidir.

Kodun yüklü varlıklara dayandığı durumlarda (örneğin, bir görüntünün boyutları gerekiyorsa), kodun loadetkinlik için bir işleyiciye yerleştirilmesi gerekir .

İkinci sorunun cevabı -

Hayır, çakışma modunda jQuery kullanmadığınız sürece aynıdır.

Bu üç işlev aynıdır.

$(document).ready(function(){

}) 

ve

$(function(){

}); 

ve

jQuery(document).ready(function(){

});

burada like = $tanımlamak için kullanılır .jQuery$jQuery

Şimdi fark şu ki

$(document).readyDOMyüklendiğinde tetiklenen jQuery olayıdır , bu nedenle belge yapısı hazır olduğunda tetiklenir.

$(window).load tüm resim yüklendikten sonra sayfa resim, css vb. içeriyorsa etkinlik tetiklenir

Arasındaki fark $(document).ready()ve $(window).load()işlevleri içine dahil kod olmasıdır $(window).load()oysa yüklenir (vb görüntüler, iframe'ler, stil) tüm sayfa kez çalışacak belge hazır , iframe'lerin vb yüklenen tüm resimler önce olay yangınlar, ama bütün DOM kendisi sonra hazır.

$(document).ready(function(){

}) 

ve

$(function(){

});

ve

jQuery(document).ready(function(){

});

Yukarıdaki 3 kod arasında fark yoktur.

Eşdeğerdir, ancak başka herhangi bir JavaScript Çerçevesi kısayol adıyla aynı dolar sembolünü $ kullanırsa çakışma yaşayabilirsiniz .

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

Hazır olay her zaman tarayıcıya yüklenen tek html sayfasında yürütülür ve işlevler yürütülür .... Ancak load olayı tüm sayfa içerikleri sayfa için tarayıcıya yüklendiğinde yürütülür ... .. jquery betiklerinde noconflict () yöntemini kullandığımızda $ veya jQuery kullanabiliriz ...

$(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 , DOM ve sayfadaki tüm içerik (her şey) CSS, resimler ve çerçeveler gibi tamamen yüklendiğinde tetiklenen bir olaydır. En iyi örneklerden biri, gerçek görüntü boyutunu elde etmek veya kullandığımız herhangi bir şeyin ayrıntılarını almak istememizdir.

$ (document) .ready () , DOM yüklendikten ve komut dosyası tarafından değiştirilmeye hazır olduğunda içindeki kodun yürütülmesi gerektiğini belirtir. JQuery komut dosyasını çalıştırmak için görüntülerin yüklenmesini beklemez.

<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, $ (belge) .ready () öğesinden sonra tetiklendi.

$(document).ready(function(){

}) 
//and 
$(function(){

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

});

3'ün üzerinde aynı, $ jQuery takma adıdır, başka herhangi bir JavaScript Çerçevesi aynı dolar sembolünü $ kullanırsa çakışma yaşayabilirsiniz. Eğer u yüz çatışması jQuery ekibi bir çözüm sağlamak çatışma olmadan daha fazla bilgi.

$ (window) .load 1.8'de kullanımdan kaldırıldı ve jquery 3.0'da kaldırıldı