ความแตกต่างระหว่าง DOMContentLoaded และโหลดเหตุการณ์

ความแตกต่างระหว่างDOMContentLoadedและloadกิจกรรมคืออะไร?

จากศูนย์นักพัฒนา Mozilla :

เหตุการณ์ DOMContentLoaded ถูกเรียกใช้เมื่อเอกสารได้รับการโหลดอย่างสมบูรณ์และแยกวิเคราะห์โดยไม่ต้องรอ stylesheets, รูปภาพและเฟรมย่อยจนเสร็จสิ้นการโหลด (เหตุการณ์โหลดสามารถใช้ในการตรวจสอบหน้าโหลดเต็ม)

DOMContentLoadedเหตุการณ์จะยิงเร็วที่สุดเท่าที่ลำดับชั้น DOM ได้รับการสร้างขึ้นได้อย่างสมบูรณ์ในloadเหตุการณ์ที่จะทำมันเมื่อภาพทั้งหมดและเฟรมย่อยมีการโหลดเสร็จแล้ว

DOMContentLoadedจะทำงานบนเบราว์เซอร์ที่ทันสมัยที่สุดแต่ไม่ใช่ใน IEรวมถึง IE9 ขึ้นไป มีวิธีแก้ไขปัญหาบางอย่างเพื่อเลียนแบบเหตุการณ์นี้ใน IE เวอร์ชันเก่าเช่นที่ใช้ในไลบรารี jQuery พวกเขาแนบเหตุการณ์เฉพาะ IE onreadystatechange

เห็นความแตกต่างด้วยตัวคุณเอง:

การสาธิต

จากMicrosoft IE

เหตุการณ์ DOMContentLoaded เริ่มทำงานเมื่อการวิเคราะห์หน้าปัจจุบันเสร็จสมบูรณ์ เหตุการณ์โหลดจะเริ่มขึ้นเมื่อไฟล์ทั้งหมดโหลดเสร็จจากแหล่งข้อมูลทั้งหมดรวมถึงโฆษณาและรูปภาพ DOMContentLoaded เป็นเหตุการณ์ที่ยอดเยี่ยมในการใช้ฟังก์ชันเชื่อมต่อของ UI กับเว็บเพจที่ซับซ้อน

จากMozilla Developer Network

เหตุการณ์ DOMContentLoaded ถูกเรียกใช้เมื่อเอกสารได้รับการโหลดอย่างสมบูรณ์และแยกวิเคราะห์โดยไม่ต้องรอ stylesheets, รูปภาพและเฟรมย่อยจนเสร็จสิ้นการโหลด (เหตุการณ์โหลดสามารถใช้ในการตรวจสอบหน้าโหลดเต็ม)

DOMContentLoaded==window.onDomReady()

Load==window.onLoad()

ไม่สามารถจัดการหน้าอย่างปลอดภัยได้จนกว่าเอกสารจะ "พร้อม" jQuery ตรวจพบสถานะของความพร้อมนี้สำหรับคุณ รหัสที่รวมอยู่ใน $ (document) .ready () จะทำงานเมื่อหน้าเอกสาร Object Model (DOM) พร้อมสำหรับโค้ด JavaScript เพื่อดำเนินการ รหัสที่รวมอยู่ใน $ (หน้าต่าง) .load (ฟังก์ชั่น () {... }) จะทำงานเมื่อหน้าทั้งหมด (รูปภาพหรือ iframes) ไม่ใช่แค่ DOM เท่านั้นพร้อม

ดู: http://learn.jquery.com/using-jquery-core/document-ready/

• domContentLoaded : ทำเครื่องหมายจุดเมื่อ DOM พร้อมแล้วและไม่มีสไตล์ชีตที่บล็อกการทำงานของ JavaScript - ซึ่งหมายความว่าตอนนี้เราสามารถสร้างแผนผังการแสดงผลได้แล้ว (อาจ) เฟรมเวิร์ก JavaScript จำนวนมากรอเหตุการณ์นี้ก่อนที่จะเริ่มดำเนินการตรรกะของตนเอง ด้วยเหตุผลนี้เบราว์เซอร์จะบันทึกการประทับเวลา EventStart และ EventEnd เพื่อให้เราสามารถติดตามว่าการดำเนินการนี้ใช้เวลานานเท่าใด

• loadEvent : เป็นขั้นตอนสุดท้ายในทุกหน้าโหลดเบราว์เซอร์ไฟเหตุการณ์ "onload" ซึ่งสามารถเรียกตรรกะแอปพลิเคชันเพิ่มเติม

แหล่ง

นี่คือรหัสบางอย่างที่เหมาะกับเรา เราพบว่า MSIE ถูกตีและพลาดไปDomContentLoadedดูเหมือนว่าจะมีความล่าช้าบ้างเมื่อไม่มีทรัพยากรเพิ่มเติมถูกแคช (มากถึง 300ms ตามการบันทึกคอนโซลของเรา) และมันจะทริกเกอร์เร็วเกินไปเมื่อถูกแคช ดังนั้นเราจึงหันไปใช้ทางเลือกสำหรับ MISE คุณต้องการทริกเกอร์doStuff()ฟังก์ชันไม่ว่าจะDomContentLoadedทริกเกอร์ก่อนหรือหลังไฟล์ JS ภายนอกของคุณ

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