Tải hình ảnh qua callback bất đồng bộ trong JavaScript
Hãy triển khai hàm loadImage,
hàm này sẽ tải hình ảnh. Giả sử tham số đầu tiên
hàm này nhận đường dẫn đến hình ảnh,
còn tham số thứ hai - một callback sẽ được thực thi khi
hình ảnh được tải xong:
loadImage('img.png', function() {
// sẽ thực thi khi hình ảnh được tải
});
Giả sử tham số đầu tiên của callback của chúng ta nhận được liên kết đến phần tử DOM của hình ảnh, còn tham số thứ hai - lỗi, nếu có tình huống ngoại lệ xảy ra:
loadImage('img.png', function(image, err) {
console.log(image, err);
});
Chúng ta có thể sử dụng hàm của mình như sau:
loadImage('image.png', function(image, err) {
document.body.append(image); // đặt hình ảnh sau khi tải
});
Hoặc với xử lý tình huống ngoại lệ:
loadImage('image.png', function(image, err) {
if (!err) {
document.body.append(image);
} else {
console.log('đã xảy ra lỗi: ' + err);
}
});
Hãy triển khai hàm loadImage. Sử dụng
mã để tải
hình ảnh mà bạn đã học trước đây.