Bắt Sự Kiện Khi Hình Ảnh Trên Trang Web Được Load Xong

Một trong những yêu cầu không phải hiếm gặp phải đó là các lập trình viên cần phải biết được khi nào hình ảnh trên trang được load (tải) xong. Một ảnh trên trang được thể hiện qua việc sử dụng thẻ HTML <img> với ít nhất một thuộc tính là src. Một ví dụ đơn giản:

<img src="http://hoclaptrinh.org/logo.png">

Trang web được tải về đầy đủ là khi trình duyệt đã tải xong mã lệnh HTML, các tập tin dẫn chiếu như CSS, Javascript và các hình ảnh trong các thẻ <img> như trên. Và chỉ khi các ảnh này đã được tải về toàn bộ thì lúc đó trình duyệt mới hoàn thành xong công việc tải trang web. Javascript có hỗ trợ tính năng giúp các lập trình viên có thể bắt được sự kiện trên, nhờ sử dụng phương thức addEventListener có sẵn trong mỗi phần tử img.

Ở ví dụ dưới đây, giả sử trên trang có một phần tử img và phần tử này có thuộc tính ID là myImage. Và như vậy chúng ta sẽ đăng ký sự kiện load cho phần tử img sử dụng Javascript như sau:

var myImage = document.getElementById('myImage');

myImage.addEventListener('load', function () {
    alert('Ảnh đã được tải xong');
});

Trong phương thức addEventListener này chúng ta có đối số thứ nhất là tên của sự kiện được dùng để đăng ký cho phần tử myImage tham gia vào sự kiện này. Đối số thứ 2 là một hàm callback không có tên. Hàm này sẽ được gọi khi sự kiện load ảnh kết thúc.

function() {
    alert('Ảnh đã được tải xong');
}

Tuy nhiên ví dụ trên giả sử chúng ta chỉ có 1 ảnh trên trang. Trường hợp trên trang có nhiều ảnh thì bạn phải làm sao?

Bạn hãy dừng lại và suy nghĩ một lát trước khi đọc lời giải mà tôi để ở phía dưới đây.

Dưới đây là đáp án của tôi để giải quyết bài toán trên:

var myImages = document.getElementByTagNames('myImage');
var count = myImages.length;
var loadIndex = 0;

for (var i = 0; i < count; i++) {
    myImages[i].addEventListener('load', function () {
        if (loadIndex++ == count) {
            alert('Tất cả ảnh đã được tải về');
        }
    });
}
}