jQuery Lazyload

Đăng bởi Neo trong mục Hướng dẫn vào 24 tháng 11, 2009 | Comments
Xem Demo

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.

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" 
});
plugin, jquery

Bạn có thích bài viết này?

Neo's picture

Neo

Nhìn mặt trời từ năm 1984 nhưng tới tận 2002 mới được thấy cái máy tính đầu tiên của mình. Đầu năm 2007 thì quyết định theo cái nghề cao quý là thiết kế web Big Grin. Hiện mình đang sống tại Hà Nội. Sở thích: làm website và giúp đỡ mọi người phát triển website theo chiều hướng tốt đẹp hơn.

Trang chủ - Twitter

Các bài tương tự