DOMContentLoaded ve load olayları arasındaki fark

DOMContentLoadedVe loadetkinlikler arasındaki fark nedir ?

Gönderen Mozilla Geliştirici Merkezi'ndeki :

DOMContentLoaded olayı, stil sayfaları, resimler ve alt karelerin yüklenmesini bitirmesini beklemeden belge tamamen yüklendiğinde ve ayrıştırıldığında tetiklenir (load olayı tam yüklü bir sayfayı algılamak için kullanılabilir).

DOMContentLoadedOlay kısa sürede DOM hiyerarşi tamamen inşa edildiği gibi, ateş edeceği loadtüm resimler ve alt çerçeveler bitmiş yükleme olduğunda olay yapacak.

DOMContentLoadedçoğu modern tarayıcıda çalışır, ancak IE9 ve üstü dahil IE'de çalışmaz . JQuery kitaplığında kullanılan gibi IE'nin eski sürümlerinde bu olayı taklit etmek için bazı geçici çözümler vardır , bunlar IE'ye özgü onreadystatechange olayı ekler.

Farkı kendiniz görün:

DEMO

Gönderen Microsoft IE

Geçerli sayfanın ayrıştırılması tamamlandığında DOMContentLoaded olayı tetiklenir; load olayı, tüm dosyalar reklamlar ve resimler dahil tüm kaynaklardan yüklemeyi tamamladığında tetiklenir. DOMContentLoaded, UI işlevselliğini karmaşık web sayfalarına bağlamak için harika bir etkinliktir.

Gönderen Mozilla Geliştirici Ağı

DOMContentLoaded olayı, stil sayfaları, resimler ve alt karelerin yüklenmesini bitirmesini beklemeden belge tamamen yüklendiğinde ve ayrıştırıldığında tetiklenir (load olayı tam yüklü bir sayfayı algılamak için kullanılabilir).

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

Bir sayfa, belge "hazır" olana kadar güvenli bir şekilde değiştirilemez. jQuery sizin için bu hazır olma durumunu algılar. $ (Document) .ready () içine dahil edilen kod yalnızca Belge Nesne Modeli (DOM) sayfasının JavaScript kodunun yürütülmesine hazır olması durumunda çalışır. $ (Window) .load (function () {...}) içindeki kod, yalnızca DOM değil, tüm sayfa (resimler veya iframe'ler) hazır olduğunda çalışır.

Bkz. Http://learn.jquery.com/using-jquery-core/document-ready/

• domContentLoaded : Hem DOM hazır olduğunda hem de JavaScript yürütülmesini engelleyen stil sayfaları olmadığında noktayı işaretler - yani artık (potansiyel olarak) render ağacını oluşturabiliriz. Birçok JavaScript çerçevesi, kendi mantıklarını yürütmeye başlamadan önce bu etkinliği bekler. Bu nedenle tarayıcı, bu yürütmenin ne kadar sürdüğünü takip etmemize izin vermek için EventStart ve EventEnd zaman damgalarını yakalar.

• loadEvent : her sayfa yüklemesinde son adım olarak tarayıcı ek uygulama mantığını tetikleyebilecek bir “yükleme” olayı başlatır .

kaynak

İşte bizim için çalışan bazı kodlar. MSIE'nin vurulduğunu ve kaçırıldığını gördük DomContentLoaded, hiçbir ek kaynak önbelleğe alınmadığında bir miktar gecikme var gibi görünüyor (konsol günlük kaydımıza dayanarak 300 ms'ye kadar) ve önbelleğe alındıklarında çok hızlı tetikleniyor. Bu yüzden MISE için bir yedeğe başvurduk. Ayrıca tetiklemek istiyorum doStuff()fonksiyonu olsun DomContentLoadedönce ya da harici JS dosyaları sonra tetikleyiciler.

// detect MSIE 9,10,11, but not Edge
ua=navigator.userAgent.toLowerCase();isIE=/msie/.test(ua);

function doStuff(){
    //
}
if(isIE){
    // play it safe, very few users, exec ur JS when all resources are loaded
    window.onload=function(){doStuff();}
} else {
    // add event listener to trigger your function when DOMContentLoaded
    if(document.readyState==='loading'){
        document.addEventListener('DOMContentLoaded',doStuff);
    } else {
        // DOMContentLoaded already loaded, so better trigger your function
        doStuff();
    }
}