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

Question

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

Answer 1

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

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

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

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

但请注意，data-* 持有者没有命名标准，因此不同的插件将使用不同的名称 - 您必须手动收集这些名称(例如 this plugin 使用名称 data-original ，this one 使用 data-layzr 等等)。

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