如何在不滚动的情况下强制加载已安装 "lazy load" 的网页的图像？

Question

我实现了一个 Chrome 扩展。该扩展程序需要获取网页的所有图片 URL。但是，有些网页有 "lazy load" 插件。我的问题是我是否仍然可以在不需要手动向下滚动的情况下获取 URL？

Answer 1

查看源代码，您可以在所有图像上触发 'appear' 事件。

$('img').trigger('appear');

如果您愿意提供一个 jsfiddle 进行测试，将会有所帮助。

Answer 2

许多延迟加载插件将实际的 URL 存储在 data-* 部分。向下滚动时，就在图像标签进入视图之前，data-* 内容设置在 src 属性上以开始加载图像。

您可以像这样遍历所有图像标签来查找链接，例如：

var images = document.querySelectorAll("img"),
    links = [], i = 0, img;

while(img = images[i++]) 
    links.push(img.dataset.original || img.src);

但请注意，data-* 持有者没有命名标准，因此不同的插件将使用不同的名称 - 您必须手动收集这些名称（f.ex。this plugin uses the name data-original, this one 使用 data-layzr 等等）。

你可以做一个循环遍历 dataset 集合的附加步骤来找到任何可能包含 URL 的字符串（如果 src 为空），但也可以这样容易出错，因为来自同一服务器的图像通常是相对链接，而 data-* 也可以包含其他数据。

如何在不滚动的情况下强制加载已安装 "lazy load" 的网页的图像？

How to force loading images for the webpages installed "lazy load" without scrolling?

javascript

lazy-loading

google-chrome-extension