背景图片懒加载

背景图片懒加载和普通图片懒加载有一些不同，因为背景图片通常是通过 CSS 设置的。下面是两种实现背景图片懒加载的方法：

1. 使用 data-* 属性。在 HTML 中，可以将背景图片的 URL 存储在 data-* 属性中，然后在 JavaScript 中获取这个 URL 并将其设置为背景图片。例如：

<div class="lazy" data-bg="path/to/image.jpg"></div>

var lazyDivs = document.querySelectorAll('.lazy');
lazyDivs.forEach(function(div) {
  var bg = div.getAttribute('data-bg');
  div.style.backgroundImage = 'url(' + bg + ')';
});

这种方法的好处是可以使用 HTML5 自定义属性，但缺点是需要维护额外的 HTML 属性。

2. 使用 JavaScript。在 JavaScript 中，可以通过创建新的 Image 对象来预加载背景图片，然后将其设置为背景图片。例如：

<div class="lazy"></div>

var lazyDivs = document.querySelectorAll('.lazy');
lazyDivs.forEach(function(div) {
  var bg = div.style.backgroundImage;
  var img = new Image();
  img.src = bg;
  img.onload = function() {
    div.style.backgroundImage = 'url(' + bg + ')';
  };
});

这种方法的好处是不需要维护额外的 HTML 属性，但缺点是需要额外的 JavaScript 代码。

无论哪种方法，都需要在页面滚动时检测元素是否可见，并触发图片加载。可以使用 Intersection Observer API 来实现这个功能。