圖片預載入和懶載入

林恒發表於2024-07-30

🧑‍💻 寫在開頭

點贊 + 收藏 === 學會🤣🤣🤣

圖片預載入和圖片懶載入是網頁最佳化的兩種常見技術，它們可以提升使用者體驗並改善網頁效能。

圖片預載入（Image Preloading）：

圖片預載入是指在頁面載入時提前載入圖片，使其快取在瀏覽器中，當使用者需要檢視這些圖片時，可以立即顯示，而不需要等待載入。這樣可以提高使用者的訪問體驗，尤其是對於包含大量圖片的網站。

實現方法：

  • 使用 JavaScript 預載入圖片：
var image = new Image();
image.src = 'image.jpg';
  • 使用 CSS 預載入圖片：
.preloaded-image {
    background-image: url('image.jpg');
}
  • 透過 HTML 預載入圖片：
<link rel="preload" href="image.jpg" as="image">

圖片懶載入（Lazy Loading）：

圖片懶載入是指延遲載入圖片，直到使用者滾動到頁面上的特定位置時才載入圖片。這樣可以減少頁面載入時間，並且節省頻寬，特別是對於長頁面或包含大量圖片的頁面來說，可以顯著提升效能。

實現方法：

  • 使用 JavaScript 實現圖片懶載入：

document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = document.querySelectorAll("img.lazy");
    lazyImages.forEach(function(img) {
        if (img.getBoundingClientRect().top < window.innerHeight) {
            img.src = img.dataset.src;
            img.onload = function() {
                img.classList.remove('lazy');
            };
        }
    });
});
  • 使用 Intersection Observer 實現圖片懶載入：
var lazyImages = document.querySelectorAll('img.lazy');
var observer = new IntersectionObserver(function(entries) {
    entries.forEach(function(entry) {
        if (entry.isIntersecting) {
            var img = entry.target;
            img.src = img.dataset.src;
            img.onload = function() {
                img.classList.remove('lazy');
            };
            observer.unobserve(img);
        }
    });
});
lazyImages.forEach(function(img) {
    observer.observe(img);
});

在這兩種實現方式中，圖片懶載入會在使用者滾動頁面時自動載入圖片，而不會一次性載入所有圖片，從而提高頁面載入速度和效能。

如果對您有所幫助，歡迎您點個關注，我會定時更新技術文件，大家一起討論學習，一起進步。

圖片預載入和懶載入

相關文章