713

Hangisi daha yaygın olarak desteklenir: window.onloadveya document.onload?

javascript event-handling dom-events

— Chris Ballance
kaynak

2

MDN belgeleri şu windowolayları açıklar : onloadve DOMContentLoaded. Kullanım örneği :, window.addEventListener('DOMContentLoaded', callback). 2019 ortasından itibaren tüm büyük tarayıcılarla uyumludur. ----- developer.mozilla.org/en-US/docs/Web/API/Window/… ------ developer.mozilla.org/en-US/docs/Web/API/Window/load_event

— Craig Hicks

Benim için bile, bugün Firefox 75.0'da window.onloadve document.onloadbirbirinden farklı ! window.onloaddaha sonra gerçekleşiyor gibi görünüyor ve biraz daha yüklü document.onload! (Bazı şeyler belge ile çalışmayan pencere ile çalışıyor! Bu belge.onreadstatechange 'tamamlandı' için de geçerli!)

— Andrew

725

Ne zaman ateş ediyorlar?

window.onload

Varsayılan olarak, içeriği (resimler, CSS, komut dosyaları vb.) Dahil olmak üzere sayfanın tamamı yüklendiğinde tetiklenir .

Bazı tarayıcılarda artık document.onloadDOM hazır olduğunda rolünü devralır ve tetiklenir.

document.onload

Görüntüler hazır olduğunda ve diğer harici içerik yüklenmeden önce DOM hazır olduğunda çağrılır .

Ne kadar iyi destekleniyorlar?

window.onloaden geniş çapta desteklendiği görülmektedir. Aslında, çoğu modern tarayıcıların bazı duygusu yerini sahip document.onloadolan window.onload.

Tarayıcı desteği sorunları, büyük olasılıkla birçok kişinin belgenin hazır olup olmadığını denetlemek için jQuery gibi kitaplıkları kullanmaya başlamasının nedenidir :

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

Tarih amacıyla. window.onloadvs body.onload:

Benzer bir soru kodlama forums üzerinde bir süre önce window.onloadaşırı kullanımı hakkında sorulmuştur body.onload. Sonuç, kullanmanız gerektiği gibi görünüyordu window.onloadçünkü yapınızı eylemden ayırmak iyidir.

— Josh Mein
kaynak

25

Aslında bu ifade , tamamen farklı olan window.onloadve <body onload="">tamamen farklı olan bir seçime yönelik gibi görünmektedir (ve "eylemden ayrı yapı" bu bağlamda çok daha mantıklıdır). Cevabın yanlış olduğu değil, temeli yanlıştır.

— Thor84no

2

Bu alıntı dilbilgisi açısından korkunç ... bazı (işaretli) düzenleme yardımı olmamalı mı?

— Kheldar

@ Thor84no Sonunda bakmak için zaman buldum, başka bir göz atın. Birkaç iyileştirme yaptım.

— Josh Mein

@Kheldar Alıntıyı oldukça sert olduğu için yorumlamaya karar verdim.

— Josh Mein

@JoshMein Bu document.onloadjQuery JS eşdeğer anlamına mı geliyor document.ready?

— john cj

276

Genel fikir olduğunu window.onload yangınları belgenin pencere olduğunda sunum için hazır ve document.onload yangınları zaman DOM ağacı (belge içinde işaretleme kodundan inşa edilmiş) olan tamamlandı .

İdeal olarak, DOM ağacı olaylarına abone olmak , Javascript aracılığıyla ekran dışı manipülasyonlara izin verir ve neredeyse hiç CPU yükü yaratmaz . Aksine, window.onloadolabilir yangına bir süre alabilir , birden fazla harici kaynaklar, istenen ayrıştırılır ve yüklenecek henüz varken.

►Test senaryosu:

Farkı ve gözlemlemek nasıl tarayıcı seçim ait aletlerin yukarıda belirtilen olay işleyicileri -, sadece belgenin içinde aşağıdaki kodu ekleyin <body>- etiketinin.

<script language="javascript">
window.tdiff = []; fred = function(a,b){return a-b;};
window.document.onload = function(e){ 
    console.log("document.onload", e, Date.now() ,window.tdiff,  
    (window.tdiff[0] = Date.now()) && window.tdiff.reduce(fred) ); 
}
window.onload = function(e){ 
    console.log("window.onload", e, Date.now() ,window.tdiff, 
    (window.tdiff[1] = Date.now()) && window.tdiff.reduce(fred) ); 
}
</script>

►Result:

Chrome v20 (ve muhtemelen en güncel tarayıcılar) için gözlemlenebilen sonuç davranışı aşağıda verilmiştir.

document.onloadEtkinlik yok .
onloadiçinde bildirildiğinde iki kez, içinde bildirildiğinde bir <body>kez <head>(etkinliğin daha sonra olduğu gibi document.onload).
sayacın durumuna bağlı olarak sayma ve hareket etme her iki olay davranışını da taklit etmeyi sağlar.
Alternatif olarak, window.onloadolay işleyicisini HTML <head>öğesinin sınırları içinde bildirin .

►Örnek Proje:

Yukarıdaki kod bu projenin kod tabanından ( index.htmlve keyboarder.js) alınmıştır.

Pencere nesnesinin olay işleyicilerinin listesi için lütfen MDN belgelerine bakın.

— Lorenz Lo Sauer
kaynak

143

Etkinlik Dinleyicisi Ekle

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) {
      // - Code to execute when all DOM content is loaded. 
      // - including fonts, images, etc.
  });
</script>

`Update March 2017`

1 Vanilya JavaScript

window.addEventListener('load', function() {
    console.log('All assets are loaded')
})

2 jQuery

$(window).on('load', function() {
    console.log('All assets are loaded')
})

İyi şanslar.

— Akash
kaynak

14

"DOMContentLoaded olayı, ilk HTML belgesi tamamen yüklendiğinde ve ayrıştırıldığında, stil sayfaları, resimler ve alt çerçevelerin yüklenmesini beklemeden tetiklenir." - developer.mozilla.org/tr/docs/Web/Events/DOMContentLoaded Dolayısıyla, bu etkinlikte yüklenen her şeyin yanlış olduğu anlaşılıyor.

— ProfK

2

@ProfK, geri bildiriminiz için teşekkür ederiz. Eğer deneyebilir miyim window.addEventListener('load', function() {...}). Cevabımı da güncelledim.

— Akash

4

Bu cevap hakkında sevdiğim, düz eski bir javascript çözümü vermesidir. Çoğu kişinin, tek cevap olarak ne sıklıkla verildiği göz önüne alındığında, jQuery'nin tüm tarayıcılarda yerleşik olduğunu düşünürsünüz.

— Dave Land

Lanet jquery'nin yüklenmesi çok uzun sürdüğü ve $ bulamadığınızda çifte problem. Ben $ (pencere) .ready türü çözümleri çalışmak için asla güvenilir gerektiğini düşünüyorum.

— Shayne

1

İkisini de bugün krom denedim. Css ve yazı tiplerini beklemiyor.

— movAX13h

78

Göre Ayrıştırma HTML belgeleri - uç ,

Tarayıcı HTML kaynağını ayrıştırır ve ertelenmiş komut dosyalarını çalıştırır.
A DOMContentLoaded, documenttüm HTML'nin ayrıştırıldığı ve çalıştığı tarihte gönderilir . Olay için kabarcıklar window.
Tarayıcı, load olayını geciktiren kaynaklar (resimler gibi) yükler.
loadAdresinde bir olay gönderilir window.

Bu nedenle, yürütme sırası

DOMContentLoadedwindowyakalama aşamasında olay dinleyicileri
DOMContentLoaded olay dinleyicileri document
DOMContentLoadedwindowkabarcık aşamasında olay dinleyicileri
loadadlı kişinin olay dinleyicileri ( onloadolay işleyici dahil )window

İçindeki bir kabarcık loadolay dinleyicisi ( onloadolay işleyici dahil ) documentasla çağrılmamalıdır. Yalnızca yakalama loaddinleyicileri çağrılabilir, ancak stil sayfasındaki gibi bir alt kaynağın yüklenmesi nedeniyle, belgenin kendisinin yüklenmesi nedeniyle değil.

window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - capture'); // 1st
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - capture'); // 2nd
}, true);
document.addEventListener('DOMContentLoaded', function() {
  console.log('document - DOMContentLoaded - bubble'); // 2nd
});
window.addEventListener('DOMContentLoaded', function() {
  console.log('window - DOMContentLoaded - bubble'); // 3rd
});

window.addEventListener('load', function() {
  console.log('window - load - capture'); // 4th
}, true);
document.addEventListener('load', function(e) {
  /* Filter out load events not related to the document */
  if(['style','script'].indexOf(e.target.tagName.toLowerCase()) < 0)
    console.log('document - load - capture'); // DOES NOT HAPPEN
}, true);
document.addEventListener('load', function() {
  console.log('document - load - bubble'); // DOES NOT HAPPEN
});
window.addEventListener('load', function() {
  console.log('window - load - bubble'); // 4th
});

window.onload = function() {
  console.log('window - onload'); // 4th
};
document.onload = function() {
  console.log('document - onload'); // DOES NOT HAPPEN
};

Snippet'i genişlet

— Oriol
kaynak

Snippet'inizi çalıştırdım ve document - load - capturegerçekten gerçekleşiyor, bu da belge yükünün benim için neden gerçekleşmediğine ilişkin aramada beklediğim şeyin tersidir. Tuhaf, tutarsız. Bazen görünür, bazen görünmez, bazen iki kez görünür - ama asla document - load - bubblegerçekleşmez. Kullanmamanızı öneririm document load.

— erroric

@erroric İyi bir nokta. loadDış kaynaklarda bir olayın gönderildiğini düşünmedim . Bu olay kabarcık oluşturmaz, bu nedenle genellikle belgede algılanmaz, ancak yakalama aşamasında olmalıdır. Bu girişler <style>ve <script>öğelerinin yükünü belirtir . Edge'in bunları göstermek için doğru olduğunu düşünüyorum ve Firefox ve Chrome yanlış.

— Oriol

Teşekkürler Oriol, useCaptureseçenek bana yeni bir şey öğretti.

— Paul Watson

W3'ten ayrıştırma ve oluşturma akışını özetlediğiniz için teşekkür ederiz. Sadece 'yük' olayı tetiklendiğinde 4. adımdan sonra merak ediyorum, başka ne olabilir? Tarayıcımda bazen yükleme olayı tetiklendikten sonra hala bazı nesneler olduğunu fark ettim, ancak sayfaya hiç dokunmadım veya etkileşimde bulunmadım. Bu nesnelere ne denildiğini biliyor musunuz? 'Engellemeyen oluşturma nesneleri?

— weefwefwqg3

12

Chrome'da window.onload, <body onload="">Firefox (sürüm 35.0) ve IE'de (sürüm 11) aynıdır.

Bunu aşağıdaki snippet ile keşfedebilirsiniz:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <!--import css here-->
        <!--import js scripts here-->

        <script language="javascript">

            function bodyOnloadHandler() {
                console.log("body onload");
            }

            window.onload = function(e) {
                console.log("window loaded");
            };
        </script>
    </head>

    <body onload="bodyOnloadHandler()">

        Page contents go here.

    </body>
</html>

Chrome konsolunda hem "pencere yüklendi" (ilk önce gelir) hem de "gövde yükü" ifadesini görürsünüz. Ancak, Firefox ve IE'de yalnızca "gövde yükü" göreceksiniz. window.onload.toString()IE & FF konsollarında " " çalıştırırsanız , şunu görürsünüz:

"function onload (event) {bodyOnloadHandler ()}"

yani "window.onload = function (e) ..." atamasının üzerine yazılır.

— VincentZHANG
kaynak

6

window.onloadve onunloadkısayoludur document.body.onloadvedocument.body.onunload

document.onloadve onloadtüm html etiketindeki işleyici ayrılmış gibi görünüyor ancak asla tetiklenmiyor

' onload' belgede -> doğru

— garaboncias
kaynak

5

window.onload ancak genellikle aynı şeydir. Benzer şekilde body.onload IE'de window.onload olur.

— AnthonyWJones
kaynak

1

Ancak window.onload standarttır - PS3'teki (Netfront tabanlı) web tarayıcısı pencere nesnesini desteklemez, bu yüzden orada kullanamazsınız.

— gotofritz
kaynak

0

Kısacası

windows.onloadolan IE tarafından desteklenmez 6-8
document.onload hiçbir modern tarayıcı tarafından desteklenmez (etkinlik hiçbir zaman tetiklenmez)

Kod snippet'ini göster

window.onload   = () => console.log('window.onload works');   // fired
document.onload = () => console.log('document.onload works'); // not fired

Snippet'i genişlet

— Kamil Kiełczewski
kaynak

window.onload vs document.onload

Ne zaman ateş ediyorlar?

Ne kadar iyi destekleniyorlar?

Update March 2017

1 Vanilya JavaScript

2 jQuery

`Update March 2017`