jQuery Lazyload - Plugin load ảnh lần lượt giống Blogtruyen

Hiện tại, vì công việc quá bận rộn nên mình không còn thời gian để post bài và duy trì nội dung cho blog nữa. Do đó tại thời điểm này, mình quyết định ngừng phát triển blog. Mọi bài viết sẽ vẫn được lưu trữ và mình sẽ cố gắng hỗ trợ tất cả các bạn khi có comment hỏi. Cảm ơn các bạn đã ủng hộ blog suốt thời gian qua !

Lazyload là plugin của jQuery cải thiện việc tải hình ảnh ở những trang web dài. Ảnh bên ngoài khung hình sẽ chỉ thể hiện khi người dùng kéo chuột tới. Sử dụng Lazyload ở những trang web dài với nhiều hình ảnh sẽ giúp cho trang được tải nhanh hơn, trong một số trường hợp nó còn giúp giảm tải cho máy chủ web.

Xem Demo

Cách sử dụng

Trước tiên, bạn cần download jQuery và Lazyload plugin. Sau đó thêm vào trong thẻ <head> của trang web:

<!-- Thư viện jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- jQuery Lazy Load -->
<script type="text/javascript" src="js/jquery.lazyload.pack.js"></script>
<script type="text/javascript">
  $(function() {
    $("img").lazyload(); // Đoạn code này sẽ áp dụng lazyload vào tất cả các thẻ img trên trang
  });
</script>

Tùy biến

Lazyload cung cấp một số lựa chọn như load 1 phần của ảnh, dùng ảnh thay thế, gọi sự kiện, hiệu ứng khi xuất hiện ảnh, đặt thời gian tải ảnh... Bạn có thể xem thêm trại trang chủ của lazyload

Đoạn mã dưới đây sẽ tải trước 200px của ảnh trước khi ảnh xuất hiện

$("img").lazyload({ threshold : 200 });

Dùng ảnh thay thế

$("img").lazyload({ placeholder : "img/grey.gif" });

Ảnh thay thế đi cùng plugin ảnh gif 1x1px, bạn có thể thay bằng đường dẫn ảnh riêng của mình

Sử dụng hiệu ứng mờ khi xuất hiện

$("img").lazyload({ 
    placeholder : "img/grey.gif",
    effect : "fadeIn" 
});

Theo nTuts