如何处理硒中的延迟加载图像？

Question

在标记为重复之前，请考虑我已经浏览了许多相关的堆栈溢出帖子，以及网站和文章。我还没有找到解决办法。

这个问题是这个问题的后续Selenium Webdriver not finding XPATH despite seemingly identical strings。通过更新代码以更优雅的方式工作，我确定问题实际上并非来自 xpath 方法：

for item in feed:
    img_div = item.find_element_by_class_name('listing-cover-photo ')
    img = WebDriverWait(img_div, 10).until(
            EC.visibility_of_element_located((By.TAG_NAME, 'img')))

这适用于前 5 个元素。但在那之后它超时，通过获取 img_div 的内部 html 并打印它，我发现对于超时的元素，而不是我想要的图像，有一个带有“lazyload-placeholder”类的 div。这导致我抓取延迟加载的元素，但我找不到答案。如您所见，我正在使用 WebDriverWait 来尝试给它加载时间，但我也尝试了站点范围的等待调用以及 time.sleep 调用。等待似乎并不能解决问题。我正在寻找处理这些延迟加载图像的最简单方法，最好是在 Selenium 中，但如果有其他库或产品可以与我已经拥有的 Selenium 代码一起使用，那就太好了。任何帮助表示赞赏。

Answer 1

您的图片只有在滚动到视图中时才会加载。 Selenium Python 文档在他们的FAQ 中有一个如此普遍的要求。改编自this answer，以下脚本将在抓取图像之前向下滚动页面。

    driver.get("https://www.grailed.com/categories/footwear")

    SCROLL_PAUSE_TIME = 0.5
    i = 0
    last_height = driver.execute_script("return document.body.scrollHeight")
    while True:
        driver.execute_script("window.scrollTo(0, document.body.scrollHeight);")
        time.sleep(SCROLL_PAUSE_TIME)
        new_height = driver.execute_script("return document.body.scrollHeight")
        if new_height == last_height:
            break
        last_height = new_height
        i += 1
        if i == 5:
            break

    driver.implicitly_wait(10)
    shoe_images = driver.find_elements(By.CSS_SELECTOR, 'div.listing-cover-photo img')

    print(len(shoe_images))

为了不（看似）永远滚动鞋子，我在 5 次迭代后添加了 break，但是，您可以随意删除 i 变量，它会向下滚动只要可以的。

implicit wait 可用于追赶任何仍在加载的剩余图像。

测试运行产生了 82 张图片，我通过使用突出显示 82 的 Chrome's DevTools selector 确认它已抓取页面上的所有图片。根据您允许加载的图片数量，您会看到不同的数字。