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 类，以避免重复加载。