Cấp bậc tác giả:

HTML

Tối ưu việc nạp ảnh với Lazyload

Được viết bởi QuangIT ngày 13/08/2012 lúc 08:49 PM
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.
  • 0
  • 1296

Tối ưu việc nạp ảnh với Lazyload


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.

Nguồn bài viết: Sưu tầm

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML