Trì hoãn tải ảnh với lazy loading JQuery

Cập nhật lần cuối: 01 Tháng Tám 2017

Javascript cơ bản

2,149 Lượt xem

Tải bất đồng bộ là một trong những phương pháp trì hoãn việc tải một lúc nhiều nội dung chưa cần thiết, giúp rút ngắn thời gian tải trang bằng cách chia nhỏ thời gian tải phụ thuộc vào hành động của người dùng. Lazy loading là một thư viện JQuery cho phép thực hiện trì hoãn việc tải những hình ảnh chưa cần thiết, thường là nằm ngoài vùng nhìn thấy của người. Trong bài viết này mình sẽ chia sẻ với bạn về thư viện Lazy loading và cách sử dụng nó để giúp cho việc tải trang được nhanh hơn.

Cài đặt thư viện Lazy loading

Lazy loading là một thư viện mở rộng của JQuery, vì thế trước khi cài đặt Lazy loading bạn phải cài đặt JQuery. Bạn có thể xem lại cách cài JQuery từ các CDN trong bài: JQuery là gì? Hướng dẫn sử dụng jquery cơ bản. Để tải thư viện Lazy loading bạn truy cập vào đường dẫn sau: https://plugins.jquery.com/lazyload/ sau đó chọn phiên bản và tải nó về.

Cách import thư viện như bình thường: <script src="jquery.lazyload.js"></script> nhưng phải nhớ import JQuery vào trước nhé.

Cách sử dụng Lazy loading

Lazy loading rất dễ sử dụng, đầu tiên bạn cần import thư viện JQuery và Lazyload như hướng dẫn ở phần cài đặt.
Các hình ảnh trong nội dung bạn thay từ src thành data-original, thêm class lazy hoặc định danh class bất kỳ cho hình ảnh để sử dụng cho việc cài đặt hiệu ứng.
Cuối cùng là thêm một đoạn Script để thực hiện hiệu ứng.

Ví dụ.

<!DOCTYPE html>
<html lang="en">
 <head>
   <title>Lazy Load</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!--Import thư viện cần thiết-->
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
   <script src="jquery.lazyload.js"></script>
 </head>

<body>
 
  <!--Thay SRC = DATA-ORIGINAL, Thêm class LAZY-->
  <img class="lazy" data-original="img/img1.jpg" width="100%">
  <img class="lazy" data-original="img/img2.jpg" width="100%">
  <img class="lazy" data-original="img/img3.jpg" width="100%">
  <img class="lazy" data-original="img/img4.jpg" width="100%">
  <img class="lazy" data-original="img/img5.jpg" width="100%">
  <img class="lazy" data-original="img/img6.jpg" width="100%">
 
  <!--Đoạn script hiệu ứng tải-->
  <script>
   $(function() {
      $("img.lazy").lazyload();
   });
  </script>
 </body>
</html>

Lazy loading làm việc như thế nào?

Trong ví dụ trên, mình sử dụng 6 tấm hình với kích thước lớn, Tuy nhiên trong lần tải trang, chỉ một tấm duy nhất được tải.

Khi tiếp tục kéo xuống dưới, tấm thứ hai tự động được tải.

Và cứ như vậy, nó sẽ tải hết tất cả khi người dùng kéo xuống cuối cùng. Nếu người dùng không kéo xuống hết, đồng nghĩa với việc những tấm hình ở dưới sẽ không được tải, điều này sẽ giúp bạn tiết kiệm được băng thông, giảm thiểu hoạt động trả lời máy khách của server đi rất nhiều.

Bạn có thể sử dụng thêm hiệu ứng fadeIn để làm cho việc tải những hình ảnh mới trở nên đẹp hơn.

$("img.lazy").lazyload({ effect : "fadeIn" });

Lưu ý: khi người dùng sử dụng trình duyệt không hỗ trợ Javascript hoặc trình duyệt không được bật Javascript thì các hình ảnh trên trang của bạn sẽ không được hiển thị. Để khắc phục điều này bạn sử dụng thêm một thẻ hình ảnh thường được đặt trong cặp thẻ <noscript></noscript>. Ví dụ:

<img class="lazy" data-original="img/img1.jpg" width="100%">
 <noscript>
   <img src="img/img1.jpg" width="100%">
 </noscript>

Nếu một trình duyệt hỗ trợ Javascript thì hình ảnh thường trong thẻ <noscript> sẽ không được tải, nên tốc độ tải trang vẫn không bị ảnh hưởng bởi những thẻ này.