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

Question

给你一些背景知识，许多（如果不是全部）网站一张一张地加载他们的图像，所以如果有很多图像，and/or你的电脑很慢，大部分图像不会出现。这在大多数情况下是可以避免的，但是如果您是运行精确图像 URL 的脚本，那么您不需要看到图像，您只需要它的 URL .我的问题如下：

是否可以诱使网页认为图片已加载完毕，然后开始加载下一张？

Answer 1

要将所有图像 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]);
    });
});

所以，在一天结束时，您可以执行类似的功能，这将 return 网站上所有图像的数组

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 2

通常情况下，浏览器不会在请求下一张图片之前等待一张图片下载完毕。一旦获得这些图像的 srcs，它将同时请求所有图像。

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

如果您确定它依赖于以前图像的下载，那么您可以做的是，通过一些代理服务器/防火墙路由所有请求并将其配置为 return 一个空文件每当从该站点请求图像时，HTTP 状态为 200。

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

how do I do that? – Jack Kasbrack

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

（我与 Fiddler / Telerik 没有任何关系。我建议它只是作为一个例子，因为我过去使用过它并且知道它可以用于上述目的。那里将会有更多提供类似功能的产品，您应该使用您选择的产品。）

Answer 3

如果你只想提取一次图像。您可以使用一些工具，例如

1) Chrome Extension

2) Software

3) Online website

如果你想运行它多次。大概是用上面的代码包裹在if条件

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 4

您想要 "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 5

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

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

Answer 6

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

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

How do I make a webpage think its images are done loading?

javascript

image

loading