บล็อกนี้จะแสดงให้เห็นถึงความแตกต่างระหว่าง window.onload และ document.onload ใน JavaScript
window.onload กับ document.onload ใน JavaScript
“ window.onload ” เหตุการณ์จะเริ่มทำงานเมื่อโหลดทั้งหน้า (รวมถึงทรัพยากร) เสร็จสิ้น ซึ่งหมายความว่าคุณสามารถใช้เหตุการณ์นี้เพื่อให้แน่ใจว่าหน้าโหลดได้อย่างสมบูรณ์ก่อนที่จะเรียกใช้โค้ดใดๆ ที่ต้องใช้เนื้อหาของหน้า
“ document.onload ” เหตุการณ์คล้ายกับ window.onload แต่จะเริ่มทำงานเมื่อ DOM (โครงสร้างของเนื้อหาของหน้า) ของเอกสารโหลดเสร็จแล้วเท่านั้น นี่หมายความว่าคุณสามารถใช้เหตุการณ์นี้เพื่อให้แน่ใจว่าเนื้อหาของเพจโหลดอย่างสมบูรณ์และพร้อมที่จะจัดการก่อนที่จะเรียกใช้โค้ดใดๆ
แนวทางที่ดีที่สุดในการติดตามคืออะไร?
โดยทั่วไป เป็นความคิดที่ดีที่จะใช้ document.onload แทน window.onload ถ้าคุณต้องการให้แน่ใจว่าเนื้อหาของหน้านั้นถูกโหลดอย่างสมบูรณ์ก่อนที่จะเรียกใช้โค้ดของคุณ นี่เป็นเพราะ document.onload จะเริ่มทำงานเร็วกว่า window.onload ซึ่งสามารถปรับปรุงประสิทธิภาพของโค้ดของคุณได้ อย่างไรก็ตาม หากคุณต้องการแน่ใจว่าทรัพยากรของเพจ (เช่น รูปภาพและสไตล์ชีต) โหลดจนเต็มก่อนที่จะรันโค้ด คุณควรใช้ window.onload แทน
จะใช้ window.onload กับ document.onload ใน JavaScript ได้อย่างไร
ในตัวอย่างที่ให้มา เราจะดูว่าเหตุการณ์เหล่านี้ระบุการโหลดเอกสารและการโหลดหน้าต่างอย่างไรก่อนที่จะรันโค้ดใดๆ
โทรหา “ document.onload ” เหตุการณ์ที่แจ้งให้คุณทราบว่ามีการโหลดเอกสารโดยใช้ข้อความ alert():
เอกสาร. กำลังโหลด = เตือน ( 'document_onload' ) ;โทรหา “ window.onload ” เหตุการณ์และกำหนดข้อความผลลัพธ์ของเมธอด alert() ให้กับมัน:
หน้าต่าง. กำลังโหลด = เตือน ( 'window_onload' ) ;
อย่างที่คุณเห็น เมื่อเพจถูกรีเฟรช เอกสารแรกจะถูกโหลด จากนั้นหน้าต่าง onload method จะถูกเรียกใช้เมื่อทั้งเพจโหลดเสร็จแล้ว:
นั่นคือทั้งหมดที่เกี่ยวกับเหตุการณ์ window.onload และ document.onload ใน JavaScript
บทสรุป
“ window.onload ' และ ' document.onload ” เป็นเหตุการณ์ JavaScript สองเหตุการณ์เพื่อให้แน่ใจว่าโหลดหน้าเว็บทั้งหมดก่อนที่จะรันโค้ดใดๆ document.onload จะเริ่มทำงานเร็วกว่า window.onload ซึ่งสามารถปรับปรุงประสิทธิภาพของโค้ดได้ บล็อกนี้แสดงความแตกต่างระหว่าง window.onload และ document.onload ใน JavaScript