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.
Bước đầu tiên thì chúng ta sẽ tải Lazyload tại trang chủ
http://www.appelsiini.net/projects/lazyload và
jQuery.
Và để sử dụng thì chèn đoạn mã sau vào phần header của trang web:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>
Sau đó chúng ta sẽ chọn vùng cho Lazyload hoạt động
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload();
});
</script>
Ở đoạn code này thì Lazyload sẽ áp dụng trên tất cả các thẻ img, và bạn có thể sửa lại theo nhu cầu của mình, như chỉ chọn phần ảnh ở trong thẻ
div với
id là
content:
$("#content img").lazyload()
Các bạn có thể xem demo
tại đây.