Công nghệ Lập trình

Cách lazy load ảnh bằng HTML và JavaScript

Kỹ thuật này cải thiện tốc độ trang web bằng cách chỉ tải ảnh khi chúng hiện hoặc gần màn hình của người dùng. Dưới đây là cách tạo lazy load ảnh bằng HTML và JavaScript.

Lập trình JavaScript

Trong thế giới kỹ thuật số tốc độ cao hiện này, web hiệu suất cao là cần thiết. Một khía cạnh quan trọng của việc này là đảm bảo tải ảnh hiệu quả bởi mọi người dùng đều hi vọng có trải nghiệm duyệt web mượt và và nhanh chóng. Dưới đây là cách bạn thiết kế lazy load - tải ảnh chậm bằng HTML và JavaScript.

Bạn sẽ khám phá khái niệm lazy loading ảnh và học cách triển khai nó bằng HTML và JavaScript với Intersection Observer API.

Lazy Loading là gì?

Lazy loading trì hoãn tải các phần tử như ảnh cho tới khi được yêu cầu. Thay vì tải toàn bộ ảnh lúc tải trang, lazy loading chỉ tải ảnh đang hiển thị hoặc gần vùng xem của người dùng. Cải thiện trong hiệu suất web giảm thời gian tải ban đầu và tiết kiệm băng thông.

Tại sao nên dùng Lazy Loading?

Hiện có một số lí do hấp dẫn để dùng lazy loading của ảnh trên web, ví dụ:

  • Tải trang ban đầu nhanh hơn: Lazy loading ngăn tải toàn bộ ảnh cùng lúc, giảm thời gian tải trang ban đầu. Người dùng có thể bắt đầu tương tác với trang sớm hơn, từ đó có trải nghiệm người dùng tốt hơn.
  • Cải thiện phản hồi trang: Bằng cách tải ảnh khi người dùng cuộn, web vẫn phản hồi và mượt mà, đảm bảo cuộn mượt và điều hướng mà không cần đợi tải xong toàn bộ nội dung.
  • Tiết kiệm băng thông: Lazy loading tiết kiệm băng thông, khiến nó trở nên lý tưởng với người dùng mobile và những ai có kết nối Internet chậm.
  • Lợi cho SEO: Các công cụ tìm kiếm như Google xem xét tốc độ trang như một nhân tố xếp hạng. Lazy loading có thể ảnh hưởng tích cực tới hiệu suất SEO của trang bằng cách cải thiện thời gian tải.

Triển khai Lazy Loading: Markup HTML

Để bắt đầu, bạn cần chỉnh sửa code HTML để bao gồm thuộc tính loading="lazy" trên tag <img>.

<body>

   <main>

     <section>
       <img src="./image-one-high.jpg" alt="" loading="lazy" />
     </section>

     <section>
       <img src="./image-two-high.jpg" alt="" loading="lazy" />
     </section>

     <section>
       <img src="./image-three-high.jpg" alt="" loading="lazy" />
     </section>

   </main>

</body>

Thuộc tính loading được dùng trong HTML để kiểm soát hành vi tải của các phần tử trên một trang web. Khi bạn đặt loading="lazy" trên tag <img>, nó sẽ báo cho trình duyệt trì hoãn việc tải tài nguyên khi cần.

Hiện tại, trang này trông sẽ giống như sau:

Hiện ảnh trên trang web

Triển khai lazy loading bằng JavaScript

Để đưa lazy loading lên tầm cao mới, dùng Intersection Observer API. API này cho phép bạn xem khi nào một thành phần xuất hiện hoặc đi ra ngoài khung hình.

Lý do đằng sau việc dùng Intersection Observer để lazy loading ảnh rất đơn giản: khi trang tải, nó tìm nạp một ảnh chất lượng thấp.

Sau đó, khi ảnh này hiện trong khung hình, JavaScript hoán đổi nó sang phiên bản chất lượng cao hơn. Để đưa nó vào thực tế, chỉnh sửa HTML.

<section>
   <img
   <!-- Low-quality image as a placeholder -->
     src="./image-one-low.webp"
     alt=""
     loading="lazy"
     <!-- High-quality image stored in the data attribute -->
     data-src="./image-one-high.jpg"
   />
</section>

<section>
   <img
     <!-- Low-quality image as a placeholder -->
     src="./image-two-low.webp"
     alt=""
     loading="lazy"
     <!-- High-quality image stored in the data attribute -->
     data-src="./image-two-high.jpg"
   />
</section>

<section>
   <img
     <!-- Low-quality image as a placeholder -->
     src="./image-three-low.webp"
     alt=""
     loading="lazy"
     <!-- High-quality image stored in the data attribute -->
     data-src="./image-three-high.jpg"
   />
</section>

Tại đây, nguồn ảnh chính là phiên bản chất lượng thấp và cao là nguồn thứ hai. Trang sau đó sẽ trông như thế này:

Ảnh hiện trên web

Tiếp theo, chọn toàn bộ ảnh muốn tải chậm:

"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');

Sau đó, tạo đối tượng IntersectionObserver.

const observer = new IntersectionObserver();

Sau đó, chuyển trong các entry (một mảng của đối tượng IntersectionObserverEntry), biểu thị các phần tử đang được quan sát và giao điểm của chúng với màn hình) và trình quan sát (IntersectionObserver).

const observer = new IntersectionObserver((lazyImages, observer) => { });

Tiếp theo, kiểm tra các điểm giao nhau và hoán đổi ảnh chất lượng thấp bằng chất lượng cao bất cứ khi nào phần tử đó giao nhau.

const observer = new IntersectionObserver((lazyImages, observer) => {
 lazyImages.forEach((image) => {
   if (image.isIntersecting) {
     const lazyImage = image.target;
     lazyImage.src = lazyImage.dataset.src; // Swap the image source
     observer.unobserve(lazyImage); // Stop observing this image
   }
 });
});

Cuối cùng, khởi tạo quan sát cho từng phần tử.

// Bắt đầu quan sát ảnh tải chậm
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Bạn đã triển khai lazy loading bằng JavaScript thành công rồi đấy!

Thứ Năm, 12/10/2023 08:41
5 ★ 1 👨 721
#HTML #JavaScript

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi
    ❖ Lập trình

    Cũ vẫn chất

    Xem thêm