如何使用HTML、CSS和jQuery實作圖懶載入的進階技巧

如何使用HTML、CSS和jQuery實作圖片懶載入的進階技巧

懶載入技術（Lazy Loading）是一種提升網頁效能的技術手段，特別適用於包含大量圖片的網頁。透過使用HTML、CSS和jQuery，我們可以輕鬆實現圖片懶加載，以加快網頁載入速度，提升使用者體驗。本文將介紹如何使用這三種技術實現圖片懶加載的進階技巧，並給出具體的程式碼範例。

一、HTML準備工作
在HTML中，我們需要將每個需要懶載入的圖片的src屬性替換為一個自訂的data-src屬性。同時，為了實現圖片漸進式載入效果，我們可以設定一個佔位圖（placeholder）。

<img src="/static/imghw/default1.png"  data-src="path/to/image.jpg"  class="lazy"  data- alt="image">

二、CSS樣式設定
為了在圖片載入前保持佔位圖的展示，我們需要使用CSS對img元素進行設定。同時，為了實現漸進式加載效果，我們還可以設定過渡效果。

img {
  width: 100%;
  height: auto;
  max-width: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}
img.loaded {
  opacity: 1;
}

三、jQuery實作懶載入
使用jQuery來實作懶載入非常簡單。我們可以使用$(window).on('scroll', function(){})事件監聽滾動事件，並透過判斷圖片是否可見來觸發懶加載。

$(window).on('scroll', function() {
  $('img').each(function() {
    if (isElementInViewport($(this)) && !$(this).hasClass('loaded')) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

以上程式碼會監聽滾動事件，並對每個img元素進行判斷，如果該元素在可視區域內且未加載過，則將data-src屬性的值賦給src，並添加loaded類別名稱以標記已載入。

四、片段加載及效能最佳化
為了進一步提高效能，我們可以將圖片分成多個片段進行加載，而不是一次載入所有圖片。這樣可以避免頁面一次要求大量圖片而導致的效能問題。

$(window).on('scroll', function() {
  var windowHeight = $(window).height();
  var scrollTop = $(window).scrollTop();
  $('img:not(.loaded)').each(function() {
    if (isElementInViewport($(this), windowHeight, scrollTop)) {
      $(this).attr('src', $(this).data('src')).addClass('loaded');
    }
  });
});
function isElementInViewport(el, windowHeight, scrollTop) {
  var rect = el.get(0).getBoundingClientRect();
  return (
    rect.top >= (scrollTop - windowHeight) &&
    rect.top <= (scrollTop + windowHeight * 2)
  );
}

以上程式碼中，我們透過取得視窗的高度和捲軸的位置，判斷每張圖片是否在視覺區域內。只有在可視區域內的圖片才會被載入。

綜上所述，透過使用HTML、CSS和jQuery，我們可以輕鬆地實現圖片懶載入的進階技巧，並提高網頁的載入速度與使用者體驗。透過設定自訂的data-src屬性、CSS樣式和jQuery事件監聽，以及結合片段載入和效能最佳化，我們可以更靈活地控制圖片的載入行為，提升使用者體驗和頁面效能。希望本文所提供的程式碼範例能對您有所幫助！

以上是如何使用HTML、CSS和jQuery實作圖懶載入的進階技巧的詳細內容。更多資訊請關注PHP中文網其他相關文章！