การใช้งาน Event onabort ใน JavaScript

Event onabort ทริกเกอร์เมื่อ การโหลดรูปภาพถูกยกเลิก (Aborted) ก่อนโหลดเสร็จ เช่น User กด Stop, Network Error, หรือ JavaScript ยกเลิก

ตัวอย่างโค้ด

<!DOCTYPE html>
<html>
  <body>
    <script>
      function abortFunc() {
        alert('Error - Loading of the image aborted');
      }
    </script>
    <img src="/videotutorials/images/tutor_connect_home.jpg" onabort="abortFunc()">
  </body>
</html>

คำอธิบาย

• Attribute onabort บน <img> Element
• ทริกเกอร์เมื่อ: User กด ESC/Stop, เน็ตขัดข้อง, img.src = '' ระหว่างโหลด
• ไม่ทริกเกอร์ ถ้ารูปโหลดสำเร็จ (ใช้ onload) หรือ Error (ใช้ onerror)

Events ของ <img> ทั้งหมด

รูปแบบมาตรฐานสมัยใหม่

const img = document.querySelector('img');
img.addEventListener('abort', (e) => {
  console.log('Image load aborted:', e.target.src);
  // Fallback UI, Retry Logic, Analytics
});
img.addEventListener('error', (e) => {
  console.log('Image load failed:', e.target.src);
  e.target.src = '/fallback-image.png'; // Fallback
});
img.addEventListener('load', (e) => {
  console.log('Image loaded:', e.target.src);
});

หมายเหตุ: onabort ไม่บับบ่อยในการพัฒนาปกติ แต่สำคัญสำหรับ UX ที่จัดการ Network Unreliable