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

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

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

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

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

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

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

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

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

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

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

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

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

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

สร้างปุ่ม ที่เมื่อกดแล้ว จะทำการโหลดภาพ แสดง ภาพเมื่อมันโหลดเสร็จ และแสดงข้อความแจ้งเตือนในกรณีที่มีปัญหา กับการโหลดภาพ