如何强制加载已安装的网页的图像“延迟加载"?没有滚动? [英] How to force loading images for the webpages installed "lazy load" without scrolling?

问题描述

我实现了Chrome扩展程序.该扩展程序需要获取网页的所有图像URL.但是，某些网页具有延迟加载"插件.我的问题是，是否有可能我仍然可以获取URL而无需手动向下滚动?

I implement a Chrome extension. The extension needs to get all images URLs of webpages. However, some webpages have "lazy load" plug-in. My question is if it is possible that I can still get URLs without required manually scrolling down?

推荐答案

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

Many of the lazy-load plugins stores the actual URL in the data-* section. When scrolling down, right before the image tag gets into view the data-* content is set on the src attribute to start loading the image.

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

You can iterate through all the image tags like this to find the links, for example:

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

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

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

But note that there is no naming standard for the data-* holder so different plugins will use different names - you'll have to collect these manually (f.ex. this plugin uses the name data-original, this one uses data-layzr and so on).

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

You could possible do an addition step looping through the dataset collection to find any string which may seem to contain an URL (if src is empty), but also this is prone to errors as images from the same server often are relative links and data-* can hold other data too.

这篇关于如何强制加载已安装的网页的图像“延迟加载"?没有滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！