การโหลดภาพแบบอะซิงโครนัสใน JavaScript

รูปภาพที่ถูกสร้างขึ้นแบบไดนามิก ผ่าน JavaScript ก็จะถูกโหลดแบบอะซิงโครนัสเช่นกัน ลองพิจารณาตัวอย่างโค้ดต่อไปนี้:

javascriptlet image = document.createElement('img');
image.src = 'img.png';
document.body.appendChild(image);

ดังที่คุณเห็น ตรงนี้เราสร้างแท็ก img กำหนดที่อยู่ของภาพให้กับ src ของมัน และวางภาพนี้ลงใน body อย่างไรก็ตาม ภาพจะไม่ปรากฏบนหน้าทันที เหตุผลคือเมื่อเรากำหนดที่อยู่ให้กับ src เบราว์เซอร์จะเริ่มดาวน์โหลด ภาพนั้นจากเว็บไซต์ ทันทีที่ภาพ ถูกดาวน์โหลดเสร็จ เบราว์เซอร์ก็จะสามารถ แสดงมันได้

หากภาพมีขนาดค่อนข้างใหญ่ ในขณะที่ความเร็ว อินเทอร์เน็ตค่อนข้างต่ำ ผู้ใช้ เว็บไซต์จะสามารถ "ชื่นชม" พื้นที่ว่างของภาพได้ชั่วขณะหนึ่ง - จนกว่ามันจะโหลดเสร็จ

ที่จริงแล้ว แท็ก img มี อีเวนต์ load ซึ่งจะทำงาน เมื่อการโหลดภาพสิ้นสุดลง:

javascriptlet image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
  // จะทำงานเมื่อภาพโหลดเสร็จ
});

เราสามารถใช้สิ่งนี้ได้ เพื่อที่จะวาง ภาพลงบนหน้าเว็บ ก็ต่อเมื่อ ภาพนั้นโหลดเสร็จแล้วเท่านั้น:

javascriptlet image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
  document.body.appendChild(image); // วางภาพเมื่อโหลดเสร็จ
});

ภาพอาจจะไม่โหลดสำเร็จเสมอไป: อาจ เกิดขึ้นได้ว่าที่อยู่ของภาพไม่ถูกต้อง หรือการเชื่อมต่ออินเทอร์เน็ตขาดหาย เซิร์ฟเวอร์ของเว็บไซต์มีปัญหา หรือเหตุการณ์อื่นๆ ที่คล้ายกัน กล่าวอีกนัยหนึ่ง คือ สถานการณ์ผิดปกติ ในกรณีนี้ อีเวนต์ load จะไม่ทำงาน แต่จะเป็นอีเวนต์ error แทน:

javascriptlet image = document.createElement('img');
image.src = 'img.png';

image.addEventListener('load', function() {
  document.body.appendChild(image);
});
image.addEventListener('error', function() {
  // ข้อผิดพลาดในการโหลดภาพ
});