JavaScript 中 Set 怎么在长页面滚动监听中记录需要延迟加载的图片 URL-js教程-PHP中文网

set用于懒加载图片url去重与高效查存，时间复杂度o(1)，避免重复请求；初始化时遍历data-src存入，intersectionobserver回调中用has()校验并delete()移除，确保每张图只加载一次。

javascript 中 set 怎么在长页面滚动监听中记录需要延迟加载的图片 url

在长页面中用 Set 记录待延迟加载的图片 URL，核心是“去重 + 高效查存”，避免重复绑定或重复请求。它不直接参与滚动监听逻辑，而是作为 URL 的唯一容器，配合 IntersectionObserver 或 scroll 事件使用。

为什么用 Set 而不是数组或对象？

Set 天然保证 URL 唯一性，插入、检查时间复杂度都是 O(1)，比数组 includes()（O(n)）快得多，也比用对象键模拟更语义清晰、无类型转换风险（比如 {'1': true} 和 {1: true} 实际等价）。

如何用 Set 收集待加载图片 URL

通常在页面初始化时遍历所有带 data-src 的 <img>，把 URL 存入 Set；后续滚动中只处理尚未加载过的 URL：

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

用 const pendingUrls = new Set() 初始化
遍历所有懒加载图片：img.dataset.src && pendingUrls.add(img.dataset.src)
当某张图进入视口，加载后立即从 Set 中删除：pendingUrls.delete(url)
可选：用 pendingUrls.size 监控剩余待加载数量

和 IntersectionObserver 配合的典型写法

避免手动节流，推荐用 IntersectionObserver，并在回调中结合 Set 判断是否已处理过：

const pendingUrls = new Set();
const imgs = document.querySelectorAll('img[data-src]');
imgs.forEach(img => {
  if (img.dataset.src) pendingUrls.add(img.dataset.src);
});

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      const url = img.dataset.src;
      if (url && pendingUrls.has(url)) {
        img.src = url;
        img.removeAttribute('data-src');
        pendingUrls.delete(url); // 确保只加载一次
      }
    }
  });
}, { threshold: 0.1 });

imgs.forEach(img => observer.observe(img));

注意边界情况

某些场景下需额外判断，防止误删或漏存：

图片可能被 JS 动态插入，需在插入后调用 pendingUrls.add(newUrl)
用户快速滚动可能触发多次回调，pendingUrls.has(url) 是关键守门员
如果支持图片加载失败重试，不要在失败时 delete，而应换用 Map 记录状态（如 { url: 'pending' | 'loaded' | 'error' }）
不需要持久化，页面刷新后 Set 自动清空，符合预期

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南