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


Yanıtlar:


1243

readyHTML belgesi yüklendikten sonra ise olay meydana onloadtüm içerik (örneğin görüntü) da yüklendiğinde olayı, sonradan ortaya çıkar.

onloadİse olay, DOM standart olaydır readyolay jQuery özgüdür. Etkinliğin amacı ready, belge yüklendikten sonra olabildiğince erken gerçekleşmesi gerektiğinden, sayfadaki öğelere işlevsellik ekleyen kodun tüm içeriğin yüklenmesini beklemesi gerekmez.


153
@baptx: Yanılıyorsun. readyOlay olduğu jQuery özgü. DOMContentLoadedTarayıcıda mevcutsa olayı kullanıyor , aksi takdirde taklit ediyor. DOMContentLoadedEtkinlik tüm tarayıcılarda desteklenmediğinden DOM'da tam bir eşdeğer yoktur .
Guffa

18
Tamam ama aynı sonuç DOMContentLoaded ile de mevcut, belki bunu belirtmelisiniz
baptx

55
@baptx: Soruyla alakalı olduğunu düşünmedim ve hala bilmiyorum.
Guffa

17
Neden inişli çıkışlı? Yanlış olduğunu düşündüğünüzü açıklamazsanız, cevabı geliştiremezsiniz.
Guffa

4
Diye bir olay yok onload. olay tetiklendiğinde onloadçağrılacak bir işlevi saklayan bir nesne özelliğinin adıdır load.
Scott Marcus

140

window.onloadyerleşik JavaScript etkinliğidir, ancak uygulaması tarayıcılarda (Firefox, Internet Explorer 6, Internet Explorer 8 ve Opera ) ince tuhaflıklar yaşadığı için jQuery, bunları ortadan kaldırır ve sayfanın DOM'u hazır olur olmaz tetiklenir (resimler vb. için beklemez).document.ready

$(document).ready( undefined olmayan document.ready bir jQuery işlevi olduğunu unutmayın ), aşağıdaki olayları sararak ve tutarlılık sağlar:

  • document.ondomcontentready/ document.ondomcontentloaded- belgenin DOM'si yüklendiğinde ( resimler vb. yüklenmeden önce biraz zaman geçebilir) tetiklenen yeni bir olay ; yine, Internet Explorer'da ve dünyanın geri kalanında biraz farklı
  • ve window.onload(eski tarayıcılarda bile uygulanır), tüm sayfa yüklendiğinde tetiklenen (resimler, stiller vb.)

16
Burada küçük bir yanlış anlama var: loadolayı windowtarayıcılar arasında makul bir şekilde tutarlı bir şekilde uygulanmaktadır. JQuery ve diğer kitaplıkların çözmeye çalıştığı sorun, bahsettiğiniz loadsorudur; bu, DOM tamamen yüklendikten uzun bir süre sonra olabilecek resim ve stil sayfaları gibi tüm bağımlı kaynaklar yüklenene kadar etkinliğin tetiklenmemesi, render ve etkileşim için hazır. DOM hazır olduğunda çoğu tarayıcıda tetiklenen olay çağrılır DOMContentLoaded, çağrılmaz DOMContentReady.
Tim Down

2
@Tim Down: makul olan anahtar kelime; en azından bazı nesne koklamaları gerekliydi, hatta onload(FF / IE / Opera ile farklılıklar var). Gelince DOMContentLoaded, tamamen haklısın. Açıklığa kavuşturmak için düzenleme.
Piskvor binadan ayrıldı

Ne tür bir nesne kokusu demek istiyorsun?
Tim Down

1
@Tim Down: Opera'nın sahip olduğunu biliyorum , ancak olay tetikleyicisi biraz tuhaftı (güvenilir bir şekilde tetiklemek document.onloadiçin kullanılabilir). Window.onload gittikçe: window.onload = fn1;window.onload=fn2;- sadece fn2 yüklenirken çalıştırılır. Bazı ücretsiz web barındırıcıları belgelere kendi kodlarını ekler ve bazen bu sayfa içi kodu zorlar.
Piskvor binadan ayrıldı

1
"Document.ready" yazmak yanlış değil mi? belge nesnesinin hazır bir yöntemi yoktur, jQuery nesnesi $ (belge) çağrısından döndürülür. Haklıysam lütfen bu cevabı düzenleyin çünkü bu çok kafa karıştırıcı.
A. Sallai

87

$(document).ready()bir jQuery olayıdır. JQuery'nin $(document).ready()yöntemi DOM hazır olur olmaz çağrılır (bu, tarayıcının HTML'yi ayrıştırdığı ve DOM ağacını oluşturduğu anlamına gelir). Bu, belge manipüle edilmeye hazır olur olmaz kodu çalıştırmanızı sağlar.

Örneğin, bir tarayıcı DOMContentLoaded olayını destekliyorsa (IE olmayan birçok tarayıcıda olduğu gibi), o olayda tetiklenir. (DOMContentLoaded olayının yalnızca IE9 + 'da IE'ye eklendiğini unutmayın.)

Bunun için iki sözdizimi kullanılabilir:

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

Veya steno versiyon:

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

Ana noktalar $(document).ready():

  • Görüntülerin yüklenmesini beklemez.
  • DOM tamamen yüklendiğinde JavaScript yürütmek için kullanılır. Olay işleyicilerini buraya koyun.
  • Birden çok kez kullanılabilir.
  • Değiştir $ile jQueryaldığınızda "$ tanımlı değil."
  • Görüntüleri değiştirmek istiyorsanız kullanılmaz. $(window).load()Bunun yerine kullanın .

window.onload()yerel bir JavaScript işlevidir. window.onload()DOM (Belge nesne modeli), afiş reklamları ve görüntüler dahil sayfadaki tüm içeriği yüklendikten olay patlar. İkisi arasındaki bir diğer fark, birden fazla $(document).ready()fonksiyona sahip olsak da, sadece bir onloadfonksiyona sahip olabilmemizdir .


4
Küçük nokta: IE tartışması kötü ifade edilmiştir. Belgenin readyState işlemi tamamlanana kadar IE (8 ve öncesi) "güvenli bir şekilde tetiklenemez " değil , IE'de bir DOMContentLoaded olayı yoktu . "Güvenlik" meselesi değil, IE 9'da eklenen IE'de eksik bir özellik.
ToolmakerSteve

Haklısın, bu yüzden cevabını yorumunu ve teşekkürünü yansıtacak şekilde düzenledim!
James Drinkard

"Görüntülerin yüklenmesi beklenmeyecek" diyorsunuz. en önemlisi, js diğer dosyalar hakkında? Genellikle başka bir dosyadan işlevi çağırmadan önce - yüklü olup olmadığını bilmek gerekir.
Darius.V

Bu tamamen başka bir konudur, ancak ne istediğini anlarsam, js dosyalarını hangi sırayı yerleştirdiğiniz de dahil olmak üzere sayfanızı nasıl yapılandırdığınıza dayanır. İşte daha ayrıntılı bir bağlantı: ablogaboutcode.com/2011/06/14/… HTH, James
James Drinkard

Neden birisi $ (document) .ready () öğesini birden çok kez kullanmak isteyecek?
Usman

43

DOM (belge nesnesi modeli) içeriği ve eşzamansız JavaScript , çerçeveler ve resimler dahil olmak üzere, sayfanızdaki tüm içerik tamamen yüklendiğinde bir Windows yükleme olayı tetiklenir . Gövde onload = işlevini de kullanabilirsiniz. Her ikisi de aynı; ve aynı etkinliği kullanmanın farklı yollarıdır.window.onload = function(){}<body onload="func();">

jQuery$document.ready işlevi olayı window.onload, sayfanızdan DOM (Belge nesne modeli) yüklendikten biraz önce yürütülür ve çağrılır. Görüntülerin, çerçevelerin tamamen yüklenmesini beklemez .

Aşağıdaki makaleden alınmıştır: nasıl $document.ready()farklıdır?window.onload()


Bence bu en iyi cevap!
Haoyu Chen

3
Eğer kelime kelimesi kopyalanmamışsa, katılıyorum.
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>


22

$(document).ready()Internet Explorer ile kullanırken dikkat edilmesi gereken bir kelime . Tüm belge yüklenmeden önce bir HTTP isteği kesilirse (örneğin, bir sayfa tarayıcıya akış yaparken başka bir bağlantı tıklanır) IE,$(document).ready olayı .

$(document).ready()Olay içindeki herhangi bir kod DOM nesnelerine başvuruyorsa, bu nesnelerin bulunma olasılığı vardır ve Javascript hataları oluşabilir. Ya bu nesnelere olan referanslarınızı koruyun ya da bu nesnelere window.load olayına başvuran kodu erteleyin.

Bu sorunu diğer tarayıcılarda (özellikle Chrome ve Firefox) yeniden oluşturamadım


IE'nin hangi sürümü? Uyumluluğu önemsemem gerektiğini biliyorum, ama IE ile zor. Belgeyi kullanmak kabul edilebilir mi? Zaten sadece JavaScript için mi?
Monica


22

Küçük bir ipucu:

window.addEventListenerPencereye etkinlik eklemek için her zaman öğesini kullanın . Çünkü kodu farklı olay işleyicilerinde yürütebilirsiniz.

Doğru kod:

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

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

Geçersiz kod:

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

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

Bunun nedeni onload'un üzerine yazılan nesnenin bir özelliği olmasıdır.

Buna benzer şekilde addEventListener, $(document).ready()yükten ziyade kullanmak daha iyidir.


3
Bu, sorulan soruya cevap vermiyor.

17

Etkinlikler

$(document).on('ready', handler)jQuery'den hazır etkinliğe bağlanır. İşleyici DOM yüklendiğinde çağrılır . Resimler gibi varlıklar hala eksik olabilir . Belge ciltleme sırasında hazırsa asla çağrılmaz. jQuery, DOMContentLoaded -Event öğesini kullanır ve kullanılamıyorsa öykünür .

$(document).on('load', handler)sunucudan tüm kaynaklar yüklendikten sonra tetiklenecek bir olaydır . Görüntüler şimdi yüklendi. İken onload ham HTML olay olduğunu hazır jQuery tarafından inşa edilmiştir.

Fonksiyonlar

$(document).ready(handler)aslında bir vaattir . Arama sırasında belge hazır olduğunda işleyici derhal çağrılacaktır. Aksi takdirde ready-Olay'a bağlanır .

JQuery 1.8'den önce , $(document).load(handler)bir takma ad olarak vardı $(document).on('load',handler).

Daha fazla okuma


$ (document) .load (işleyici) 'nin load-event'e bağlanma ile aynı şekilde davrandığını açıklayabilir misiniz? $ .Fn.ready aksine, hemen aramayacak?
Nabeel Khan

Sanırım $.fn.loadbununla karıştın, artık olay bağlayıcı olarak davranmıyor. Aslında, jquery 1.8'den beri kullanılmıyor. Buna göre güncelledim
abstraktor

16

$(document).ready()Bir olan jQuery iken, HTML belgesi tamamen yüklendiğinde oluşur olay window.onloadsayfasındaki herşey dahil görüntüleri yüklendiğinde olayı, sonradan ortaya çıkar.

Ayrıca window.onload DOM'da saf bir javascript olayı iken, $(document).ready()olay jQuery'de bir yöntemdir.

$(document).ready() jQuery için kullanılan tüm öğelerin jQuery'de kullanıldığından emin olmak için genellikle sarıcıdır ...

Nasıl çalıştığını anlamak için jQuery kaynak koduna bakın:

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

Ayrıca aşağıdaki resim her ikisi için hızlı bir referans olarak oluşturduk:

resim açıklamasını buraya girin


1
güzel, dokümanlar atıfta bir artı noktası .. thnx
Irf

13

window.onload: Normal bir JavaScript etkinliği.

document.ready: HTML'nin tamamı yüklendiğinde belirli bir jQuery olayı.


11

Hatırlanması gereken bir şey (ya da hatırlama demem gerekir), onloads'yi olabildiğince istifleyememenizdir ready. Başka bir deyişle, jQuery magic readyaynı sayfada birden fazla s'ye izin verir , ancak bunu ile yapamazsınız onload.

Sonuncusu onloadönceki s'leri geçersiz kılacaktır onload.

Bununla başa çıkmanın güzel bir yolu, bir Simon Willison tarafından yazılan ve Birden Fazla JavaScript Onload İşlevini Kullanma bölümünde açıklanan bir işlevdir .

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 */
});

11

Document.ready(jQuery olayı) tüm öğeler yerinde olduğunda tetiklenir ve JavaScript kodunda bunlara başvurulabilir, ancak içerik zorunlu olarak yüklenmez. Document.readyHTML belgesi yüklendiğinde yürütülür.

$(document).ready(function() {

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

window.loadSayfa tamamen yüklenecek için ancak bekleyecektir. Buna iç çerçeveler, görüntüler vb. Dahildir.

$(window).load(function() {

    //Fires when the page is loaded completely
    alert("window is loaded");
});

5

Document.ready olayı, HTML belgesi yüklendiğinde ve window.onload olay her zaman daha sonra, tüm içerik (resimler vb.) Yüklendiğinde gerçekleşir.

document.readyGörüntülerin yüklenmesini beklemeden oluşturma işlemine "erken" müdahale etmek istiyorsanız olayı kullanabilirsiniz . Komut dosyanız "bir şey" yapmadan önce resimlere (veya başka herhangi bir "içeriğe") ihtiyacınız varsa,window.onload .

Örneğin, bir "Slayt Gösterisi" deseni uyguluyorsanız ve resim boyutlarına göre hesaplamalar yapmanız gerekiyorsa, tarihine kadar beklemek isteyebilirsiniz window.onload. Aksi takdirde, görüntülerin ne kadar hızlı yükleneceğine bağlı olarak bazı rastgele sorunlar yaşayabilirsiniz. Betiğiniz, görüntüleri yükleyen iş parçacığıyla aynı anda çalışıyor olacaktır. Betiğiniz yeterince uzunsa veya sunucu yeterince hızlıysa, görüntüler zamanında geldiyse bir sorun fark etmeyebilirsiniz. Ancak en güvenli uygulama görüntülerin yüklenmesine izin vermek olacaktır.

document.readykullanıcılara bazı "yükleniyor ..." işaretini göstermeniz için iyi bir etkinlik window.onloadolabilir ve daha sonra, kaynakların yüklenmesi gereken tüm komut dosyalarını tamamlayabilir ve son olarak "Yükleniyor ..." işaretini kaldırabilirsiniz.

Örnekler: -

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

2

window.onloadbir JavaScript dahili işlevidir. window.onloadHTML sayfası yüklendiğinde tetiklenir. window.onloadyalnızca bir kez yazılabilir.

document.readyjQuery kütüphanesinin bir fonksiyonudur. document.readyHTML ve HTML dosyasında bulunan tüm JavaScript kodu, CSS ve resimler tamamen yüklendiğinde tetiklenir. document.readyGereksinimlere göre birden çok kez yazılabilir.


@ Илья-Зеленько bunun bir özellik değil, bir özellik olduğunu gösterdiğinden "window.onload bir işlevdir" yanlıştır. Ayrıntılar: developer.mozilla.org/tr-TR/docs/Web/API/GlobalEventHandlers/… oysa .ready () bir işlevdir ve bir işleyici beklemektedir.
vik

1

Söylediğinizde $(document).ready(f), komut dosyası motoruna aşağıdakileri yapmasını söylersiniz:

  1. nesne belgesini alın ve itin, yerel kapsamda olmadığından, belgenin nerede olduğunu bulmak için bir karma tablo araması yapmalıdır, neyse ki belge küresel olarak bağlıdır, bu yüzden tek bir aramadır.
  2. nesneyi bul $ ve seçin, çünkü yerel kapsamda olmadığı için, çarpışmalara sahip olan veya olmayan bir karma tablo araması yapmalıdır.
  3. başka bir karma tablo araması olan global kapsamda f nesnesini bulun veya işlev nesnesini itin ve başlatın.
  4. çağrı readyyöntem bulmak ve çalıştırmak için seçilen nesnenin içine bir karma tablosu arama içeren seçilen nesnenin.
  5. yapılır.

En iyi durumda, bu 2 karma tablo aramalarıdır, ancak jQuery $için olası tüm girişlerin mutfak lavabosu olan jQuery tarafından yapılan ağır işi görmezden gelir , bu nedenle başka bir harita sorguyu düzeltmek için doğru işleyiciyi gönderir.

Alternatif olarak, bunu yapabilirsiniz:

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

hangisi

  1. JavaScript optimize edilmişse, nesne penceresini global kapsamda bulursanız, pencere değiştirilmediğinden, zaten seçilen nesneye sahip olduğunu bilecektir, bu nedenle hiçbir şey yapılmasına gerek yoktur.
  2. fonksiyon nesnesi işlenen yığınına itilir.
  3. onloadkarma tablo araması yaparak bir özellik olup olmadığını kontrol edin , çünkü bir işlev gibi çağrılır.

En iyi durumda, bu getirilmesi gereken tek bir karma tablo aramaya mal olur, bu da getirilmesi onloadgerekir.

İdeal olarak, jQuery, sorgularını jQuery'nin yapmasını istediğiniz şeyi yapmak için yapıştırılabilecek dizelere derlerdi, ancak jQuery'in çalışma zamanı gönderilmeden. Bu şekilde,

  1. bugün yaptığımız gibi jquery'nin dinamik gönderimini yapın.
  2. jQuery sorgunuzu istediğinizi yapmak için eval geçirilebilir saf JavaScript dize derlemek var.
  3. 2 sonucunu doğrudan kodunuza kopyalayın ve maliyetini atlayın eval.

0

window.onload DOM api tarafından sağlanır ve "belirli bir kaynak yüklendiğinde load olayı tetiklenir" der.

"Load olayı belge yükleme işleminin sonunda tetiklenir. Bu noktada, belgedeki tüm nesneler DOM'dadır ve tüm resimler, komut dosyaları, bağlantılar ve alt çerçevelerin yüklenmesi tamamlanmıştır." DOM yüklemesi

Ancak jQuery $ (document) .ready () yalnızca Belge Nesne Modeli (DOM) sayfasının JavaScript kodunun yürütülmesine hazır olması durumunda çalışır. Bu, resimleri, komut dosyalarını, iframe'leri vb. İçermez. Jquery hazır olayı

Böylece jquery ready yöntemi dom onload olayından daha önce çalışacaktır .

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.