JavaScript: Lazyload (Tải chậm) ảnh

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

Tải chậm (lazy loading) là cách tiếp cận chờ tải tài nguyên cho đến khi chúng cần thiết, thay vì tải trước. Điều này có thể cải thiện hiệu suất bằng cách giảm số lượng tài nguyên cần được tải và phân tích cú pháp khi tải trang ban đầu.

Hình ảnh ngoài màn hình trong lần tải trang đầu tiên là ứng cử viên lý tưởng cho kỹ thuật này.

Một cách thức tuyệt vời là sử dụng lazysizes và đây là một chiến lược rất đơn giản để thực hiện.

Đưa file JavaScript lazysizes vào trang web​

Trước tiên ta cần tải nội dung file lazysizes.min.js tại ĐÂY.

Sau đó ta sẽ đưa file lazysizes.min.js vào trang web theo mô tả của ví dụ sau đây:

<!--
Copyright 2018 Google LLC.
SPDX-License-Identifier: Apache-2.0
-->
<!DOCTYPE html>
<html>
<head>
  <title>Imagemin Demo</title>
  <link id="favicon" rel="icon" href="https://glitch.com/edit/favicon-app.ico" type="image/x-icon">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
      body{
        text-align: center;
      }
      img{
        display: block;
        margin: 30px auto;
        border: 1px solid black;
      }

  </style>
</head>
<body>
<h1>Foobar Flowershop</h1>
<!-- Images Start -->
<img src="images/flower1.jpg" alt=""/>
<img src="images/flower2.jpg" alt=""/>
<img data-src="images/flower3.png" class="lazyload" alt=""/>
<img src="images/flower4.jpg" alt=""/>
<img src="images/flower5.jpg" alt=""/>
<script src="lazysizes.min.js" async></script><!-- Đặt file lazysizes vào sau các thẻ <img> -->
<!-- Images End -->
</body>
</html>

lazysizes sẽ tải hình ảnh một cách thông minh khi người dùng cuộn qua trang và ưu tiên những hình ảnh mà người dùng sắp gặp phải.

Chỉ định các ảnh cần tải chậm

Để chỉ định những tấm ảnh nào cần tải chậm thì ta thêm class lazyload vào các hình ảnh đó. Sau đó ta thay đổi thuộc tính src thành data-src.

Ví dụ: các thay đổi đối với flower3.png sẽ trông như thế này:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

Bạn hãy thử tải chậm với các ảnh flower3.pngflower4.jpg và flower5.jpg.

Bạn có thể tự hỏi tại sao cần phải thay đổi thuộc tính src thành data-src. Nếu thuộc tính này không được thay đổi, tất cả các hình ảnh sẽ tải ngay lập tức thay vì tải chậm. data-src không phải là thuộc tính mà trình duyệt nhận ra, vì vậy khi gặp thẻ hình ảnh có thuộc tính này, nó sẽ không tải hình ảnh. Trong trường hợp này, đó là một điều tốt, bởi vì sau đó nó cho phép tập lệnh điều chỉnh kích thước quyết định khi nào hình ảnh nên được tải, thay vì trình duyệt.

Xác minh bằng Lighthouse

Cuối cùng, bạn nên sử dụng Lighthouse để xác minh những thay đổi này. Kiểm tra hiệu suất "Defer offscreen images" của Lighthouse sẽ cho biết liệu bạn có quên thêm tải chậm vào bất kỳ hình ảnh ngoài màn hình nào hay không.​

» Tiếp: Hàm callback trong JavaScript
« Trước: Chống copy với các sự kiện JavaScript
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!