JS图片懒加载脚本仅在Chrome开发者工具设备工具栏启用时生效的问题

我之前也碰到过这个Chrome专属的诡异问题，结合你的描述和脚本片段来看，大概率是Chrome原生懒加载特性冲突，或是传统滚动监听式懒加载的兼容性问题导致的，下面给你一步步的解决方案：

核心原因分析 #

Chrome在桌面视图下默认支持原生图片懒加载（针对带有loading="lazy"的图片），如果你的自定义脚本选择器是img.lazy，且图片没有明确禁用原生懒加载，Chrome可能会优先触发原生逻辑，导致你的脚本"躺平"；另外，传统的滚动监听+getBoundingClientRect()的可见性判断，在Chrome桌面视图下可能因为滚动事件触发时机、视口计算差异等问题失效，而设备工具栏会模拟移动环境，改变这些行为，反而让脚本正常工作。

解决方案 #

1. 改用IntersectionObserver实现懒加载（推荐） #

IntersectionObserver是浏览器原生API，专门用于监听元素是否进入视口，性能更好且兼容性稳定，完全规避滚动监听的各种坑。替换你的脚本为以下代码：

document.addEventListener("DOMContentLoaded", function() {
  // 获取所有懒加载图片
  const lazyImages = document.querySelectorAll("img.lazy");
  
  // 创建观察者实例
  const lazyObserver = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      // 元素进入视口时触发加载
      if (entry.isIntersecting) {
        const targetImg = entry.target;
        // 替换真实图片地址
        targetImg.src = targetImg.dataset.src;
        // 处理srcset（如果有多分辨率图片需求）
        if (targetImg.dataset.srcset) {
          targetImg.srcset = targetImg.dataset.srcset;
        }
        // 停止观察已加载的图片，节省性能
        observer.unobserve(targetImg);
        // 移除lazy类（可选，用于加载完成后的样式切换）
        targetImg.classList.remove("lazy");
      }
    });
  }, {
    rootMargin: "200px 0px" // 提前200px加载图片，提升用户体验
  });
  
  // 开始观察所有懒加载图片
  lazyImages.forEach(img => lazyObserver.observe(img));
});

2. 禁用Chrome原生懒加载（适配旧脚本） #

如果你想继续使用原来的滚动监听脚本，需要给所有img.lazy添加loading="eager"属性，强制Chrome不使用原生懒加载：

<img class="lazy" loading="eager" data-src="your-high-res-img.jpg" src="placeholder.jpg" alt="...">

3. 检查图片标签结构 #

确保你的图片标签用data-src存储真实高清地址，src放低分辨率占位图，这样浏览器才不会提前加载高清图：

<!-- 正确写法 -->
<img class="lazy" data-src="hd-image.jpg" src="low-res-placeholder.jpg" alt="Product Image">

<!-- 错误写法（会导致浏览器提前加载高清图） -->
<img class="lazy" src="hd-image.jpg" alt="Product Image">

4. 排除缓存干扰 #

测试时打开Chrome开发者工具的Network面板，勾选Disable cache选项，避免因为缓存误以为高清图没加载。

验证方法 #

替换脚本或修改属性后，关闭设备工具栏，刷新页面，查看Network面板中图片的加载时机，确认高清图在进入视口时才开始下载。

内容的提问来源于stack exchange，提问作者Manuel Ricci