Tải ảnh bất đồng bộ trong JavaScript

Các hình ảnh được tạo động thông qua JavaScript cũng được tải bất đồng bộ. Hãy xem xét đoạn mã sau làm ví dụ:

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

Như bạn thấy, ở đây chúng ta tạo thẻ img, gán vào src của nó đường dẫn đến hình ảnh và đặt hình ảnh này vào body. Tuy nhiên, hình ảnh sẽ không xuất hiện ngay lập tức trên trang. Vấn đề là khi chúng ta gán vào src đường dẫn đến hình ảnh - trình duyệt bắt đầu tải xuống hình ảnh đó từ trang web. Chỉ khi hình ảnh được tải xuống xong, lúc đó trình duyệt mới có thể hiển thị nó.

Nếu hình ảnh đủ lớn, và tốc độ internet đủ chậm, thì người dùng trang web trong một khoảng thời gian sẽ có thể "chiêm ngưỡng" một hình ảnh trống - cho đến khi nó được tải xong.

Trên thực tế, thẻ img có sự kiện load, sự kiện này kích hoạt khi việc tải hình ảnh kết thúc:

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

image.addEventListener('load', function() {
	// sẽ kích hoạt khi hình ảnh được tải
});

Chúng ta có thể sử dụng điều này để đặt hình ảnh lên trang chỉ khi hình ảnh đó được tải xong:

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

image.addEventListener('load', function() {
	document.body.appendChild(image); // đặt lên trang khi tải xong
});

Hình ảnh không nhất thiết sẽ tải được: có thể xảy ra trường hợp đường dẫn đến hình ảnh không đúng, hoặc mất kết nối internet, sự cố máy chủ trang web hoặc điều gì đó tương tự. Nói cách khác - tình huống ngoại lệ. Trong trường hợp này, không phải sự kiện load sẽ kích hoạt, mà là sự kiện error:

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

image.addEventListener('load', function() {
	document.body.appendChild(image);
});
image.addEventListener('error', function() {
	// lỗi tải hình ảnh
});

Tạo một nút bấm, khi nhấp vào đó sẽ tải một hình ảnh. Hiển thị hình ảnh khi nó được tải xong. Hiển thị thông báo trong trường hợp có vấn đề với việc tải hình ảnh.