Question

为了给您一些背景知识，很多（如果不是全部）网站都一个一个地加载其图像，因此，如果图像很多，并且/或者您的计算机速度较慢，则大多数图像都不会显示。在大多数情况下，这是可以避免的，但是，如果您正在运行一个脚本以获取确切的图像URL，则无需查看图像，只需要它的URL即可。我的问题如下：

是否可以欺骗网页以使图像加载完成，从而开始加载下一个图像？

Answer 1

通常，浏览器在请求下一张图像之前不会等待下载一张图像。一旦获得这些图像的src，它将立即请求所有图像。

您确定图像确实在等待上一张图像的下载，还是在等待特定的时间间隔？

如果您确定它取决于先前映像的下载，那么您可以做的是，将您的所有请求通过某个代理服务器/防火墙进行路由，并将其配置为每当有映像时返回HTTP状态为200的空文件是从该网站请求的。

这样，浏览器（或实际上是网站代码）将假定已成功下载图像。

我该怎么做？ –杰克·卡斯布雷克

这实际上是一个非常开放的/基于意见的问题。它还取决于您的操作系统，浏览器，系统权限等。假设您使用的是Windows并且具有足够的权限，则可以尝试使用Fiddler。它具有AutoResponder功能供您使用。

（我与Fiddler / Telerik并没有任何隶属关系。我仅建议作为示例，因为我过去使用过它，并且知道它可以用于上述目的。还有更多提供类似功能的产品，您应该使用自己选择的产品。）

Answer 2

使用名为延迟加载的插件。它的作用是将加载整个网页，稍后再加载图像。它只会在用户滚动图像时加载图像。

Answer 3

要将所有图像URL提取到文本文件中，也许您可以使用类似的方法，如果您在任何网站内执行此脚本，它将列出图像的URL

document.querySelectorAll('*[src]').forEach((item) => {
    const isImage = item.src.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);

    if (isImage) console.log(item.src); 
});

您还可以使用相同的想法从元素中读取样式，并从背景url或类似内容中获取图片，

document.querySelectorAll('*').forEach((item) => {
    const computedItem = getComputedStyle(item);

    Object.keys(computedItem).forEach((attr) => {
        const style = computedItem[attr];
        const image = style.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);
        if (image) console.log(image[0]);
    });
});

因此，最终，您可以执行类似的功能，该功能将返回网站上所有图像的数组

function getImageURLS() {
  let images = [];
  document.querySelectorAll('*').forEach((item) => {
    const computedItem = getComputedStyle(item);

    Object.keys(computedItem).forEach((attr) => {
        const style = computedItem[attr];
        const image = style.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);
        if (image) images.push(image[0]);
    });
  });

  document.querySelectorAll('*[src]').forEach((item) => {
    const isImage = item.src.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g);

    if (isImage) images.push(item.src); 
  });
  return images;
}

它可能可以进行优化，但是，您知道了。

Answer 4

如果您只想提取图像一次。您可以使用

之类的工具

1）Chrome Extension

2）Software

3）Online website

如果要多次运行它。可能使用以上包装在条件中的代码https://stackoverflow.com/a/53245330/4674358

if(document.readyState === "complete") {
  extractURL();
}
else {
  //Add onload or DOMContentLoaded event listeners here: for example,
  window.addEventListener("onload", function () {
    extractURL();
  }, false);
  //or
  /*document.addEventListener("DOMContentLoaded", function () {
    extractURL();
  }, false);*/
}

extractURL() {
  //code mentioned above
}

Answer 5

您需要“ DOMContentLoaded”事件docs。文档完全解析后，但未加载所有内容时，就会触发。

let addIfImage = (list, image) => image.src.match(/(http(s?):)([/|.|\w|\s|-])*\.(?:jpg|jpeg|gif|png|svg)/g) ?
    [image.src, ...list] :
    list;

let getSrcFromTags= (tag = 'img') => Array.from(document.getElementsByTagName(tag))
    .reduce(addIfImage, []);

if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", doSomething);
} else {  // `DOMContentLoaded` already fired
    doSomething();
}

Answer 6

我正在使用它，按预期方式工作：

var imageLoading = function(n) {
    var image = document.images[n];
    var downloadingImage = new Image();

    downloadingImage.onload = function(){
        image.src = this.src;
        console.log('Image ' + n + ' loaded');

        if (document.images[++n]) {
            imageLoading(n);
        }
    };

    downloadingImage.src = image.getAttribute("data-src");
}

document.addEventListener("DOMContentLoaded", function(event) {
    setTimeout(function() {
        imageLoading(0);
    }, 0);
});

然后将图像元素的每个src属性更改为data-src

如何使网页认为其图像已加载完毕？

6 个答案: