Puppeteer如何获取懒加载站点的全部图片响应数据

核心逻辑是提前注册全局响应监听、持续监听至滚动完成后，Puppeteer的page.on('response')只要不手动移除，会捕获页面整个生命周期内发起的所有网络请求，包括懒加载触发的图片请求，不会因为初始页面加载完成就停止工作。 #

具体实现步骤 #

• 第一步：提前初始化图片响应存储容器与响应监听，必须在页面跳转前注册监听，避免遗漏初始加载的图片请求
• 第二步：跳转至目标页面，等待页面初始加载完成
• 第三步：执行优化后的自动滚动函数，触发所有懒加载资源请求
• 第四步：滚动完成后增加等待时长，确保所有图片请求已发起并被捕获
• 第五步：处理收集到的图片响应数据

可运行代码示例 #

const puppeteer = require('puppeteer');

// 优化后的自动滚动逻辑，修复原逻辑无法适配动态加载内容的缺陷
async function autoScroll(page) {
  await page.evaluate(async () => {
    await new Promise((resolve) => {
      const distance = 500; // 每次滚动的像素距离
      const delay = 100; // 每次滚动的间隔时间，可根据站点响应速度调整
      const timer = setInterval(() => {
        const currentScrollHeight = document.body.scrollHeight;
        window.scrollBy(0, distance);
        // 动态判断当前滚动位置是否到达真实页面底部
        if (window.innerHeight + window.scrollY >= currentScrollHeight) {
          clearInterval(timer);
          // 滚动到底部后额外等待2s，确保可能的后续懒加载内容渲染完成
          setTimeout(resolve, 2000);
        }
      }, delay);
    });
  });
}

(async () => {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 提前注册响应监听，存储所有图片资源，用Set自动去重重复请求
  const imageUrls = new Set();
  page.on('response', (response) => {
    // 过滤出图片类型的请求
    if (response.request().resourceType() === 'image') {
      imageUrls.add(response.url());
      // 若需要存储图片二进制内容，可替换为：await response.buffer()
    }
  });

  // 跳转目标页面并等待初始加载完成
  await page.goto('替换为你的目标页面URL', { waitUntil: 'networkidle2' });

  // 执行自动滚动触发所有懒加载请求
  await autoScroll(page);

  // 额外等待1s确保所有末尾的图片请求完成
  await page.waitForTimeout(1000);

  // 输出所有捕获到的图片资源地址
  console.log('全部图片URL：', Array.from(imageUrls));

  await browser.close();
})();

可选优化项 #

• 如果站点懒加载逻辑要求元素完全进入视口才触发请求，可适当缩小每次滚动的distance参数
• 对于有分页加载逻辑的站点，可在滚动逻辑中增加判断，检测到新内容加载时延长滚动等待时间
• 若需要过滤非业务相关的图片资源，可在监听回调中增加URL规则匹配逻辑

内容的提问来源于stack exchange，提问作者Tài Tài Tài