js关于懒加载，需要网络搜索的情况？

Question

类似于资源爬取，我从某网站获得rss，但rss内不包含预览图，只看名字不知所云(大人的娱乐，之类的……)

个人非商业项目，没有限制

所以我就需要获取预览图，方法我用后台做好了，访问后能直接返回图片地址，问题是前端展示:

懒加载，看到哪加载到哪，而且需要一定数量的预加载，因为网络搜索需要一点时间。

我试过 IntersectionObserver, 挺好用的, 唯一问题是我不知道怎么用它进行预加载？
再者就是监听滚动事件了。

大家有啥建议吗？

谢谢。

Answer 1

有四种方法可以参考一下

1. IntersectionObserver

优点：

• 高效，浏览器原生支持，性能好。
• 简单易用，代码量少。
• 可以精确控制预加载的范围。

代码示例：

// 选择所有需要懒加载的图片
const lazyImages = document.querySelectorAll('.lazy');

// 创建一个 IntersectionObserver 实例
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.onload = () => img.classList.remove('lazy');
      observer.unobserve(img);
    }
  });
}, {
  rootMargin: '0px 0px 300px 0px' // 提前加载300px范围内的图片
});

// 开始观察每个懒加载图片
lazyImages.forEach(image => observer.observe(image));

2. 滚动事件监听

优点：

• 灵活，可以根据滚动位置自定义加载逻辑。
• 兼容性好，适用于所有浏览器。

代码示例：

window.addEventListener('scroll', () => {
  const lazyImages = document.querySelectorAll('.lazy');
  lazyImages.forEach(img => {
    if (img.getBoundingClientRect().top < window.innerHeight + 300) { // 预加载300px范围内的图片
      img.src = img.dataset.src;
      img.onload = () => img.classList.remove('lazy');
    }
  });
});

3. 提前加载下一屏的图片

优点：

• 用户体验好，滚动时图片已经加载完毕。
• 可以结合 IntersectionObserver 或滚动事件监听实现。

代码示例：

const lazyImages = document.querySelectorAll('.lazy');
let lastScrollY = window.scrollY;

window.addEventListener('scroll', () => {
  const currentScrollY = window.scrollY;
  if (currentScrollY > lastScrollY) { // 向下滚动时
    lazyImages.forEach(img => {
      if (img.getBoundingClientRect().top < window.innerHeight * 2) { // 预加载下一屏的图片
        img.src = img.dataset.src;
        img.onload = () => img.classList.remove('lazy');
      }
    });
  }
  lastScrollY = currentScrollY;
});

4. 使用第三方库（如 lazysizes）

优点：

• 简单易用，配置灵活。
• 性能优化好，社区支持强。
• 兼容性好，适用于大多数浏览器。

代码示例：
首先引入 lazysizes 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>

然后在 HTML 中使用 data-src 属性来指定图片地址：

<img data-src="image.jpg" class="lazyload" />

lazysizes 会自动处理懒加载和预加载逻辑，你只需要添加相应的类和属性即可。