我如何判断背景图像是否成功加载……事后？

Question

赏金将在 21 小时后到期。 此问题的答案有资格获得+50声望赏金。 machineghost正在寻找这个问题的更详细的答案：

在 Puppeteer 中肯定必须有某种方式来“assertBackgroundImageLoaded(div)”吗？

有几个 Stack Overflow 问题，例如如何检查背景图像是否已加载？ 这与我的相似。 他们尝试在元素的background-image加载时运行代码，并通过向元素添加onload处理程序来完成此操作。

但是，如果您正在运行（例如）一个 Puppeteer 脚本，它会在页面加载后检查页面怎么办？ 在这种情况下，您不能添加onload处理程序。

有没有办法在不使用onload的情况下验证“事后”加载的元素的background-image ？

我能想到的唯一方法是获取他们的background-image样式，然后自己fetch图像以查看它是否加载......但这似乎比仅仅询问浏览器（以某种方式）是否加载图像要慢很多......特别是如果我要检查很多background-image 。

Answer 1

Puppeteer 有一个页面配置来检查空闲连接的数量。 所以应该在没有超过 500 毫秒指定的请求时加载图像。

await page.goto('https://www.google.com/', {"waitUntil" : "networkidle0"});

Answer 2

在onLoad事件中，写掉您希望检查的数据以便保存状态。

然后，当您的 Puppeteer 脚本运行时，您将能够重新检查相同的数据。