Cách tải từng phần hình ảnh bằng HTML và JavaScript

Alicia Brunner included in Programming Html Javascript Web Development Coding Tips

2023-10-10 1864 words 9 minutes

Contents

Trong thế giới kỹ thuật số phát triển nhanh chóng ngày nay, việc có một trang web hiệu suất cao là điều cần thiết. Một khía cạnh quan trọng của việc này là đảm bảo rằng hình ảnh của bạn tải hiệu quả. Người dùng mong đợi trải nghiệm duyệt web mượt mà và nhanh chóng và bài viết này sẽ chỉ cho bạn cách đạt được điều đó.

Đi sâu vào khái niệm tải hình ảnh hiệu quả, còn được gọi là tải từng phần và khám phá cách triển khai nó bằng cách sử dụng HTML và JavaScript kết hợp với API Intersection Observer.

Tải Lười là gì?

Tải từng phần là một kỹ thuật tối ưu hóa giúp trì hoãn việc tải các thành phần trực quan, cụ thể là hình ảnh, cho đến khi chúng cần thiết để hiển thị. Ngược lại với việc tải trước tất cả hình ảnh khi truy cập trang web, phương pháp này tìm nạp có chọn lọc các hình ảnh hiện có trong vùng lân cận hoặc tầm nhìn của người xem. Bằng cách nâng cao hiệu quả của trang web, nó giảm bớt thời gian khởi tạo cần thiết và tiết kiệm dung lượng truyền dữ liệu mạng.

Tại sao nên sử dụng tính năng tải chậm?

Thật vậy, tồn tại nhiều lý do thuyết phục để kết hợp việc tải nội dung trực quan một cách lười biếng trên nền tảng web, bao gồm nhưng không giới hạn ở:

Việc triển khai các kỹ thuật tải từng phần có thể nâng cao đáng kể hiệu suất của các trang web bằng cách trì hoãn việc tải hình ảnh cho đến khi chúng được yêu cầu để xem. Cách tiếp cận này không chỉ giảm thời gian tải trang ban đầu mà còn cho phép người dùng bắt đầu tương tác với trang web nhanh hơn, cuối cùng mang lại trải nghiệm người dùng tổng thể được cải thiện.

Trang web duy trì mức độ phản hồi cao bằng cách tải động hình ảnh khi người dùng cuộn, từ đó loại bỏ mọi độ trễ hoặc độ trễ khi cuộn và điều hướng có thể xảy ra do phải chờ tất cả nội dung tải đầy đủ trước đó. Cách tiếp cận này cho phép tương tác liền mạch với nội dung của trang web trong khi vẫn duy trì hiệu suất tổng thể của nó.

Tải chậm là một kỹ thuật thiết kế web bao gồm việc trì hoãn tải nội dung không cần thiết cho đến khi cần, do đó giảm thời gian tải ban đầu của trang web. Bằng cách tiết kiệm băng thông thông qua phương pháp này, các trang web được tối ưu hóa tốt hơn cho các thiết bị di động và những cá nhân có kết nối Internet chậm hơn. Do đó, việc lười tải có thể làm giảm đáng kể mức tiêu thụ dữ liệu tổng thể của trang web, cuối cùng mang lại trải nghiệm thân thiện hơn cho người dùng.

Tối ưu hóa thứ hạng của công cụ tìm kiếm là rất quan trọng trong bối cảnh kỹ thuật số ngày nay và một khía cạnh quan trọng đóng vai trò quan trọng trong vấn đề này là hiệu suất trang web. Cụ thể, các công cụ tìm kiếm như Google tính đến các yếu tố như tốc độ trang khi xác định trang web nào sẽ hiển thị nổi bật trong trang kết quả của họ. Trong bối cảnh này, tải chậm đã được chứng minh là có tác động tích cực đến hiệu suất SEO do khả năng nâng cao thời gian tải, cuối cùng dẫn đến trải nghiệm người dùng được cải thiện và thứ hạng tổng thể của công cụ tìm kiếm tốt hơn.

Trước những ưu điểm đã nói ở trên, hãy cho phép tôi làm sáng tỏ quy trình triển khai tải từng phần trong ứng dụng web của bạn.

Triển khai tải chậm: Đánh dấu HTML

Để bắt đầu quá trình, cần phải sửa đổi đánh dấu HTML bằng cách kết hợp thuộc tính “loading=‘lazy’” trong thẻ của hình ảnh.

 <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 sử dụng trong ngữ cảnh đánh dấu HTML, dùng để điều chỉnh hành vi tải của các thành phần khác nhau được hiển thị trên trang web. Bằng cách chỉ định “loading=‘lazy’” trong thẻ img, trình duyệt được hướng dẫn trì hoãn việc thu thập tài nguyên liên quan cho đến thời điểm nó trở nên cần thiết để hiển thị hoặc xử lý thêm.

Hiện tại, trang web có bố cục như sau:

Triển khai Lazy Loading: Triển khai JavaScript

Để nâng cao chức năng của kỹ thuật tải từng phần của bạn, hãy cân nhắc sử dụng API Trình quan sát giao lộ. Công cụ mạnh mẽ này cho phép giám sát các thành phần khi chúng vào hoặc ra khỏi khung nhìn của người dùng, cung cấp cách tiếp cận chính xác và hiệu quả hơn để tải nội dung.

Lý do cơ bản của việc sử dụng Trình quan sát giao lộ liên quan đến việc tải hình ảnh chậm là tương đối đơn giản. Khi trang web tải lần đầu, nó sẽ truy xuất phiên bản hình ảnh có độ phân giải giảm thay vì tất cả hình ảnh có độ phân giải cao mà người dùng không hiển thị ngay lập tức.

Khi hình thu nhỏ có độ phân giải thấp xuất hiện trong vùng hiển thị của trình duyệt, JavaScript sẽ thay thế nó bằng phiên bản chi tiết và độ phân giải cao hơn. Để triển khai chức năng này, bạn sẽ cần thực hiện một số điều chỉnh đối với mã HTML của mình.

 <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>

Yếu tố trực quan chính trên trang web này là mô tả có độ phân giải thấp, trong khi phần trình bày chất lượng cao đóng vai trò là tài nguyên phụ trợ. Do đó, trang web tự trình bày theo cách nó kết hợp đồng thời cả hình ảnh cấp độ thấp và độ trung thực cao.

Để bắt đầu, hãy chọn các thành phần hình ảnh sẽ được tải một cách lười biếng để có trải nghiệm người dùng hiệu quả hơn:

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

Sau đó, tạo một đối tượngIntersectionObserver.

 const observer = new IntersectionObserver();

Thật vậy, chúng tôi sẽ cung cấp một mảng bao gồm một tập hợp các đối tượng IntersectionObserverEntry, gói gọn thông tin liên quan đến các phần tử được giám sát cũng như các giao điểm của chúng với vùng trực quan, cùng với thể hiện IntersectionObserver đóng vai trò là công cụ quan sát của chúng tôi.

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

Tiếp theo, chúng tôi sẽ kiểm tra mọi điểm giao nhau và thay thế hình ảnh có chất lượng thấp hơn bằng phiên bản có chất lượng cao hơn khi phần tử tương ứng tiếp xúc.

 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ử.

 // Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });

Thật vậy, bằng cách sử dụng JavaScript, bạn đã thực hiện thành công chiến lược tải từng phần.

Trình duyệt của bạn không hỗ trợ thẻ video.

Cân nhắc tải chậm

Để triển khai hiệu quả việc tải chậm trong ứng dụng web, điều cần thiết là phải tính đến một số yếu tố quan trọng. Chúng bao gồm việc xem xét cách thức và thời điểm tải dữ liệu, cũng như xác định thành phần nào sẽ được tải một cách lười biếng. Ngoài ra, phải xem xét cẩn thận tác động của việc tải từng phần lên hiệu suất và trải nghiệm người dùng, đặc biệt liên quan đến độ trễ mạng và băng thông khả dụng. Điều quan trọng nữa là phải đảm bảo rằng nội dung được tải từng phần vẫn có thể hoạt động độc lập sau khi được tải mà không phụ thuộc vào các tài nguyên khác chưa được tìm nạp. Cuối cùng, phải đưa ra các cơ chế xử lý lỗi thích hợp để xử lý mọi vấn đề tiềm ẩn có thể phát sinh trong quá trình tải từng phần.

Để nâng cao khả năng truy cập, điều cần thiết là phải bao gồm mô tả thay thế cho hình ảnh thông qua việc sử dụng thuộc tính “alt”. Được biết đến như một tài liệu tham khảo đáng tin cậy cho người dùng trình đọc màn hình, văn bản bổ sung này đảm bảo rằng những người khiếm thị cũng có thể hiểu được ý nghĩa từ nội dung được trình bày trong hình ảnh.

⭐ Khả năng tương thích của trình duyệt: Trước khi triển khai tải từng phần, hãy xác nhận khả năng tương thích của nó với các trình duyệt khác nhau. Không phải tất cả các trình duyệt đều mở rộng hỗ trợ cho tính năng này. Trong một số trường hợp nhất định, việc đưa vào polyfill có thể trở nên bắt buộc, đặc biệt đối với các trình duyệt cũ hơn. Một công cụ như CanIUse là một nguồn tài nguyên quý giá để đánh giá khả năng tương thích của trình duyệt.

Không thể phóng đại tầm quan trọng của việc tiến hành đánh giá toàn diện cơ chế tải chậm, trên nhiều thiết bị và kích thước màn hình khác nhau.

Nâng cao tốc độ trang web và trải nghiệm người dùng

Việc kết hợp tính năng tải chậm cho hình ảnh trong trang web là một phương tiện hiệu quả để nâng cao hiệu suất của trang web và mang lại trải nghiệm người dùng được cải thiện. Bằng cách giảm thời gian tải và tạo điều kiện điều hướng mượt mà, phương pháp này phù hợp với mong đợi của khán giả sành điệu ngày nay, những người ưu tiên sự nhanh chóng và tương tác liền mạch.

Thật vậy, việc sử dụng phương pháp này sẽ không chỉ tăng cường tối ưu hóa công cụ tìm kiếm mà còn tiết kiệm mức tiêu thụ băng thông. Vì vậy, bạn còn chờ đợi điều gì? Bắt đầu hợp lý hóa trang web của bạn ngay lập tức bằng cách sử dụng chiến thuật thân thiện với người dùng nhưng hiệu quả này.