图片按需加载js

图片按需加载（也称为懒加载）是一种优化网页性能的技术，它只在用户需要查看图片时才加载图片，而不是一次性加载页面上的所有图片。这种技术可以显著减少页面的初始加载时间，提高用户体验，特别是在移动设备和网络条件较差的情况下。

基础概念： 图片按需加载通常涉及到监听滚动事件，判断图片是否进入可视区域，如果进入则加载图片。这个过程可以通过JavaScript实现，也可以使用现成的库或框架来简化开发。

相关优势：

1. 减少初始页面加载时间，提升用户体验。
2. 节省带宽资源，特别是在移动网络环境下。
3. 减少服务器压力，因为不是所有的图片都会在同一时间被请求。

类型：

1. 基于滚动事件的懒加载：通过监听window的scroll事件，判断图片是否进入视口。
2. 基于Intersection Observer API的懒加载：这是一种更现代的方法，通过Intersection Observer来监测元素是否进入视口，性能更优，代码更简洁。
3. 预加载（Preloading）：在用户可能需要之前就加载某些资源，这可以和懒加载结合使用，以进一步优化用户体验。

应用场景：

• 图片密集的网站，如电商网站的产品列表、社交媒体平台、图片分享网站等。
• 移动应用中的图片加载。

遇到的问题及原因：

1. 图片闪烁：由于图片在进入视口时才开始加载，可能会导致布局的变化，从而引起闪烁。解决方法是设置图片容器的占位符，保持布局稳定。
2. 滚动事件性能问题：频繁触发滚动事件可能会导致页面卡顿。使用节流（throttling）或防抖（debouncing）技术可以缓解这个问题，或者使用Intersection Observer API来避免直接监听滚动事件。
3. 图片加载失败：网络问题或服务器问题可能导致图片加载失败。需要有相应的错误处理机制，比如重试策略或者显示备用图片。

如何解决这些问题：

• 使用CSS设置图片容器的固定宽高，确保在图片加载完成前有占位，避免布局变动。
• 使用Intersection Observer API代替滚动事件监听，以提高性能。
• 对于加载失败的图片，可以使用onerror事件处理器来提供备用图片或者重试加载。

示例代码（使用Intersection Observer API）：

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

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // 回退到滚动事件监听的代码
  }
});

在这个示例中，图片元素需要有一个lazy类和一个data-src属性，后者存储了图片的真实URL。当图片进入视口时，Intersection Observer会将其src属性设置为data-src的值，从而触发图片加载。