ความหมายของ load event
เหตุการณ์ load บน JavaScript จะถูกส่งออกเมื่อหน้าเว็บโหลดเสร็จทั้งหมด รวมถึงไฟล์ CSS สคริปต์ (async, defer, module), iframe และภาพอื่น ๆ. :contentReference[oaicite:2]{index=2}
เมื่อใดควรใช้ load event
หากโค้ดของคุณต้องการให้แน่ใจว่า “ทรัพยากรทั้งหมด” โหลดเสร็จสมบูรณ์แล้ว เช่นภาพหรือ iframe ถึงจะเริ่มทำงาน ควรใช้ window.addEventListener("load", …) :contentReference[oaicite:3]{index=3}
ตัวอย่างการใช้งาน JavaScript
window.addEventListener("load", (event) => { console.log("page is fully loaded"); }); หรือแบบเก่า:
window.onload = (event) => { console.log("page is fully loaded"); }; ความแตกต่างระหว่าง DOMContentLoaded และ load
เหตุการณ์ DOMContentLoaded จะถูกส่งออกเมื่อโดมโหลดและวิเคราะห์แล้ว แต่ load จะรอจนทุกทรัพยากรโหลดเสร็จด้วย :contentReference[oaicite:5]{index=5}
คำแนะนำและข้อควรระวัง
- ไม่ควรใช้ load ถ้าโค้ดของคุณเพียงต้องการโต้ตอบกับ DOM ทันทีหลังวิเคราะห์ เพราะจะช้ากว่า DOMContentLoaded
- ตรวจสอบว่าโค้ดที่ลงทะเบียน load listener ไม่ถูกวางหลังเหตุการณ์ load เกิดแล้ว เพราะอาจไม่ถูกเรียก