嗅探页面图片Chrome接口文档

在Google Chrome浏览器中，如果你想通过JavaScript获取或操作页面上的图片，可以利用`IntersectionObserver` API 和 `fetch()`函数结合来嗅探元素进入视口后加载图片，因为`Intersection Observer`允许你在元素满足特定条件（如进入视线）时触发回调。

Chrome官方并没有直接提供一个叫做“嗅探页面图片”的接口，但是你可以自定义一些解决方案：

1. 使用`IntersectionObserver`观察图片元素：

const imgObserver = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting && !entry.target.naturalWidth) { // 如果元素进入视区且未加载完成
      const url = entry.target.src; // 获取图片URL
      fetch(url)
        .then((response) => response.blob())
        .then((blob) => {
          URL.revokeObjectURL(entry.target.src); // 移除原始src URL
          entry.target.src = URL.createObjectURL(blob); // 设置新src为已下载的blob
        });
    }
  });
}, { threshold: 0.5 }); // 阈值设置以便较早触发

// 添加图片元素到观察列表
imgObserver.observe(document.querySelector('img')); // 替换为实际图片元素选择器

2. 利用`load`事件监听图片加载：

document.querySelectorAll('img').forEach((img) => {
  img.addEventListener('load', () => {
    img.classList.add('loaded'); // 标记图片已加载
  });
});

不过请注意，有些图片可能会预先加载，或者用户可能已经手动设置了图片的显示，这时可能需要根据具体需求调整策略。