Hướng dẫn sử dụng jQuery Lazyload

Lazy loader là một plugin của JQuery được viết bằng Javascript nó dùng để tải hình ảnh ở các trang web dài ảnh ở bên ngoài khung hình sẽ chỉ hiện ra khi người dùng kéo chuột đến. Sử dụng Lazyload ở các trang web dài sẽ giúp cho trang web load nhanh hơn, phần nội dung của trang web sẽ được load lên trước sau đó khi người dùng kéo chuột Lazyload mới load hình ảnh đó về cho bạn, ở trong một số trường hợp nó còn có tác dụng giảm tải cho Web Server.

Cách sử dụng:

Đầu tiên bạn phải download JQuery và Lazyload sau đó include chúng vào header của trang web

1

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

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

1	$("img").lazyload({ threshold : 200 });<br>

Dùng ảnh thay thế

1	$("img").lazyload({ placeholder : "img/grey.gif" });<br>

Ả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

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