Question

我正在通过无头浏览器Puppeteer使用JavaScript抓取工作站点。

我正在从工作现场成功抓取前6个公司徽标。但是，在这前6个徽标之后，它将突然停止打印出真实徽标（因此，向我提供了src URL），而是输入了一个占位符图像。

这可能是什么原因？

仅供参考，我正在抓取这样的图像：

const image = card.querySelector('div.job-element__logo img').src

Answer 1

图像正在延迟加载。

正确的src尚未加载的图像存储在称为data-src的{{3}}中。您可以结合使用data attribute和page.evaluate()来过滤和抓取所有正确的图像Array.from()值：

const images = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('.job-element__logo img'), e => e.dataset.src ? `https://www.stepstone.de${e.dataset.src}` : e.src);
});

如果您想抓取每个职位的职位，公司，描述和图片，则可以使用以下解决方案：

const jobs = await page.evaluate(() => {
  return Array.from(document.querySelectorAll('.job-element'), card => {
    const position = card.querySelector('.job-element__body__title').textContent.trim();
    const company = card.querySelector('.job-element__body__company').textContent.trim();
    const description = card.querySelector('.job-element__body__details').textContent.trim();
    const image_element = card.querySelector('.job-element__logo img');
    const image = image_element.dataset.src ? `https://www.stepstone.de${image_element.dataset.src}` : image_element.src;

    return {
      position,
      company,
      description,
      image,
    };
  });
});

抓取：仅抓取第一张图片，其余图片用占位符填充。为什么？

1 个答案: