jQuery如何實現懶加載

在 jQuery 中，可以使用 window.onload 或者 $(document).ready() 來實現頁面加載完成時執行某些操作。但是，如果你想要實現懶加載（即在用戶滾動頁面并且圖片進入可視區域時才加載圖片），你可以使用以下方法：

1. 首先，確保已經在 HTML 文件中引入了 jQuery 庫：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

2. 創建一個包含圖片鏈接的 HTML 元素，如 <div>，并為其添加一個類名（例如 lazy-load）：

<div class="lazy-load">
  <img data-src="image1.jpg" alt="Image 1">
</div>
<div class="lazy-load">
  <img data-src="image2.jpg" alt="Image 2">
</div>
<!-- 更多圖片... -->

注意，我們將 src 屬性替換為 data-src，以便在頁面加載時不加載圖片。

3. 創建一個 JavaScript 文件或在 HTML 文件中添加以下代碼，以實現懶加載功能：

$(document).ready(function() {
  // 獲取所有帶有類名 "lazy-load" 的元素
  var lazyLoadImages = $('.lazy-load');

  // 定義一個函數，當圖片進入可視區域時執行
  function loadImage(image) {
    // 將 data-src 屬性的值設置為 img 元素的 src 屬性，以加載圖片
    image.attr('src', image.data('src'));

    // 從 DOM 中移除 lazy-load 類，以避免重復加載
    image.removeClass('lazy-load');
  }

  // 使用 Intersection Observer API 監聽元素是否進入可視區域
  var observer = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        // 當圖片進入可視區域時，調用 loadImage 函數并傳遞當前圖片元素
        loadImage(entry.target);

        // 從 observer 中移除當前圖片元素，以避免重復調用
        observer.unobserve(entry.target);
      }
    });
  });

  // 為每個 lazy-load 圖片元素添加 Intersection Observer 監聽
  lazyLoadImages.each(function() {
    observer.observe(this);
  });
});

這段代碼首先獲取所有帶有類名 “lazy-load” 的元素，然后使用 Intersection Observer API 監聽它們是否進入可視區域。當圖片進入可視區域時，將 data-src 屬性的值設置為 img 元素的 src 屬性，以加載圖片，并從 DOM 中移除 lazy-load 類，以避免重復加載。