如何实现web图片懒加载功能

懒加载（Lazy Loading）是一种常见的Web性能优化技术，它可以延迟加载页面上的非关键资源，比如图片。当用户滚动页面并接近这些资源时，这些资源才会开始加载。下面是实现图片懒加载的几种方法：

1. 使用原生的 loading属性（HTML5）

最新的HTML标准中为 <img>标签增加了一个 loading属性，可以设置为 lazy，这样浏览器会自动懒加载这些图片。

html
<img src="example.jpg" loading="lazy" alt="描述文本" />

这种方式是最简单、最直接的，但它依赖于浏览器的支持，老版本的浏览器可能不支持这个属性。

2. 使用JavaScript实现懒加载

可以用JavaScript监听滚动事件，动态地加载图片。实现的基本思路是：

• 将图片的 src属性替换为 data-src，初次加载时不加载实际图片。
• 监听页面的滚动事件。
• 当图片进入可视区域时，将 data-src的值赋给 src，加载图片。

示例代码如下：

html
<img data-src="example.jpg" alt="描述文本" />

javascript
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));

  let active = false;

  const lazyLoad = function() {
    if (active === false) {
      active = true;

      setTimeout(function() {
        lazyImages.forEach(function(lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.removeAttribute("data-src");

            lazyImages = lazyImages.filter(function(image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              document.removeEventListener("scroll", lazyLoad);
              window.removeEventListener("resize", lazyLoad);
              window.removeEventListener("orientationchange", lazyLoad);
            }
          }
        });

        active = false;
      }, 200);
    }
  };

  document.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

3. 使用Intersection Observer API

这是一个现代的API，它提供了一种异步检测目标元素与其祖先元素或顶级文档 viewport的交叉状态的方法。

javascript
document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));
  const imageObserver = new IntersectionObserver(function(entries, observer) {
    entries.forEach(function(entry) {
      if (entry.isIntersecting) {
        const image = entry.target;
        image.src = image.dataset.src;
        imageObserver.unobserve(image);
      }
    });
  });

  lazyImages.forEach(function(image) {
    imageObserver.observe(image);
  });
});

这种方式不需要监听滚动事件，性能更好，但需要浏览器支持 Intersection Observer。

4. 使用第三方库

还有一些现成的第三方库可以帮助实现图片懒加载，如 lozad.js、lazysizes等。这些库通常提供了更多的功能和更好的兼容性。

html
<script src="path_to_lazysizes.js" async=""></script>

<!-- 在img元素中使用class="lazyload" -->
<img data-src="example.jpg" class="lazyload" alt="描述文本" />

在使用第三方库时，通常只需要引入相应的JavaScript文件，并在图片标签中做一些简单的修改即可。