Share Kiểm tra hình ảnh đã được tải với thư viện imagesLoaded

[filiallion]

Language

Tiếng Việt

Khi truy cập một website nào đó mà hình ảnh trên website xuất hiện hiệu ứng đang được tải thì các bạn sẽ thấy website thật thú vị. Ngoài ra, trong một số trường hợp các bạn muốn làm một việc gì đó ngay sau khi tất cả hình ảnh trên website được tải hoàn toàn thì phải làm thế nào? Với yêu cầu này thì tôi nghĩ hầu hết các bạn sẽ sử dụng JavaScript để kiểm tra và tôi cũng vậy nhưng với tôi thì tôi sẽ sử dụng các thư viện có sẵn. Trong trường hợp này thì thư viện imagesLoaded là thư viện tôi sẽ sử dụng.

Trước khi tích hợp thư viện imagesLoaded các bạn cần phải tích hợp thư viện jQuery. Các bạn tải thư viện jQuery tại địa chỉ http://jquery.com/download.

Các bạn tải thư viện imagesLoaded tại địa chỉ https://github.com/desandro/imagesloaded.

Tích hợp thư viện imagesLoaded vào website với dòng lệnh như sau:

<script src="path/to/imagesloaded.pkgd.min.js"></script>

Và cài đặt thư viện với nội dung mã lệnh như sau:

$(function() {
    $('#container').imagesLoaded();
});

Với nội dung mã lệnh cài đặt thư viện như trên thì sẽ có tác dụng với tất cả hình ảnh nằm trong thành phần có id là container.

Các bạn có thể tìm hiểu thêm về thư viện imagesLoaded tại địa chỉ https://imagesloaded.desandro.com.