从 TripAdvisor 抓取动态加载图像答案

【问题标题】：Crawling dynamic loading images from TripAdvisor从 TripAdvisor 抓取动态加载图像
【发布时间】：2016-12-27 07:49:56
【问题描述】：

我正在尝试从 TripAdvisor 网站上抓取评论。由于网站中的大部分图片都是动态加载的，所以我使用 Splash javascript 渲染服务来生成页面。

问题是有些图片加载了，有些没有。

这是我要抓取的评论的 URL： https://www.tripadvisor.com.sg/ShowUserReviews-g294265-d1770798-r446535418-Marina_Bay_Sands-Singapore.html

我尝试将 Splash 等待时间设置为 10 秒（最大值），结果还是一样。

这是我在 Splash 中使用的代码：

function main(splash)
  local url = splash.args.url
  assert(splash:go(url))
  assert(splash:wait(10))
  splash:set_viewport_full()
  return {
    html = splash:html(),
    png = splash:png(),
    har = splash:har(),
  }
end

这是由 Splash 生成的结果图像（裁剪出的页脚部分）：Click to view the image

如您所见，除了评论中的图像（它们应该在红色矩形中）之外，所有其他动态加载图像都已加载。我检查了 html 并发现 img 标签是存在的，但是它们的 src 属性是“.../x.gif”，这是一个像素图像，而不是真实图像的 URL。

有没有人遇到过这样的问题或知道为什么会这样？

【问题讨论】：

标签： scrapy web-crawler scrapy-spider jquery-lazyload scrapy-splash

【解决方案1】：

当您滚动到图像时，它们似乎已加载。但是，当我尝试使用 Splash 滚动到它们时，尽管设置了延迟，但我无法让它渲染图像。

如果您查看响应正文，您会注意到图像包含在一个名为 lazyImgs 的 JavaScript 数组中，并且每个图像都有一个 ID。当您遍历评论时，您可以从占位符元素中读取每个 ID，并使用它们从 JavaScript 数组中检索图像。这可能是最简单的解决方案。

【讨论】：