$(document).ready() ใน jQuery เทียบเท่า JavaScript แบบ vanilla คืออะไร?

ใน jQuery หากต้องการให้ event ทำงานบนหน้าเว็บ ควรเรียกภายใน $(document).ready() ทุกอย่างภายในจะโหลดทันทีที่ DOM โหลดเสร็จ ก่อนที่เนื้อหาหน้าจะโหลด

$(document).ready(function() { 
  alert("Document loaded successful!"); 
});

ตัวอย่าง

ใน JavaScript แบบ vanilla (ไม่ใช้ library) เพื่อให้ได้ผลลัพธ์เหมือนกัน ลองใช้โค้ดดังนี้:

<html> 
  <body> 
    <script> 
      var loader = setInterval(function () { 
        if (document.readyState !== "complete") return; 
        clearInterval(loader); 
        alert("Document loaded successful!"); 
      }, 300); 
    </script> 
  </body> 
</html>

วิธีมาตรฐานสมัยใหม่ (Modern Standard)

// DOMContentLoaded - ไม่รอรูปภาพ/stylesheet โหลดเสร็จ
document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM ready!');
});

// load event - รอทุกอย่างโหลดเสร็จ (รวมรูปภาพ)
window.addEventListener('load', function() {
  console.log('Page fully loaded!');
});

DOMContentLoaded เร็วกว่าและเหมาะสมกว่าสำหรับการเริ่มต้น JavaScript ส่วนใหญ่