วิธีเรียกฟังก์ชัน JavaScript เมื่อโหลดหน้าเว็บ (Page Load)

ใช้ window.onload หรือ DOMContentLoaded เพื่อเรียกฟังก์ชันเมื่อหน้าเว็บโหลดเสร็จ

ตัวอย่างจากบทความ (window.onload)

<!DOCTYPE html>
<html>
  <body>
    <script>
      function alertFunction() {
        alert('ok');
      }
      window.onload = alertFunction;
    </script>
  </body>
</html>

วิธีการต่างๆ และความแตกต่าง

1. window.onload (เดิม)

window.onload = function() {
  console.log('ทุกอย่างโหลดเสร็จ: HTML, CSS, Images, Scripts');
};

• รอให้ ทุกอย่าง โหลดเสร็จ (รวมรูปภาพ, stylesheet)
• มีได้เพียง 1 handler (การกำหนดซ้ำจะทับที)

2. window.addEventListener('load') (แนะนำ)

window.addEventListener('load', function() {
  console.log('โหลดเสร็จทั้งหน้า');
});

// เพิ่มหลายตัวได้
window.addEventListener('load', anotherFunction);

3. DOMContentLoaded (เร็วกว่า - แนะนำสำหรับ DOM manipulation)

document.addEventListener('DOMContentLoaded', function() {
  console.log('DOM พร้อมแล้ว (ไม่รอรูปภาพ/CSS)');
  // เข้าถึง element ได้เลย
});

4. Defer Script (Modern Best Practice)

<!-- ใน HTML head -->
<script src="app.js" defer></script>

// app.js - รันหลัง DOM พร้อมโดยอัตโนมัติ
console.log('DOM ready');

5. Module Script (ES6)

<script type="module">
  // รันหลัง DOM พร้อม โดยอัตโนมัติ (defer behavior)
  console.log('Module ready');
</script>

ตารางเปรียบเทียบ

ตัวอย่างการใช้งานจริง

document.addEventListener('DOMContentLoaded', () => {
  // 1. Initialize components
  initNavigation();
  initSliders();
  initForms();
  
  // 2. Restore state
  restoreUserPreferences();
  
  // 3. Start analytics
  analytics.init();
  
  console.log('App initialized');
});