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

为了给你一些背景信息，很多（如果不是全部的话）网站会一个接一个地加载他们的图片，所以如果有很多图片，或者你的电脑速度很慢，大多数图片都不会显示出来。这在很大程度上是可以避免的，但是如果您正在运行一个脚本来精确显示图像URL，那么您不需要查看图像，只需要查看其URL即可。我的问题如下:

---

是否有可能欺骗网页，使其认为图像已加载完毕，从而开始加载下一个图像

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

---

它可能会被优化，但是，你会明白的。

通常，浏览器不会在请求下一个图像之前等待一个图像被下载。一旦获得这些图像的

src

s，它将同时请求所有图像

您确定这些图像确实在等待前一个图像下载，还是在等待特定的时间间隔

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

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

---

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

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

---

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

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

(一)

(二)

(三)

如果要多次运行它。可能使用上面的代码包装在if条件中

if（document.readyState==“完成”）{
提取URL（）；
}
否则{
//在此处添加onload或DOMContentLoaded事件侦听器：例如，
addEventListener（“onload”，函数（）{
提取URL（）；
}，假）；
//或
/*document.addEventListener（“DOMContentLoaded”，函数（）{
提取URL（）；
}，假）*/
}
extractURL（）{
//上述代码
}

您想要“DOMContentLoaded”事件。它会在文档完全解析后，但在加载所有内容之前立即激发

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();
}

---

我正在使用它，正如预期的那样工作：

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);
});

---

---

并将image元素的每个

src

属性更改为

datasrc

使用名为惰性加载的插件。它所做的是，它将加载整个网页，稍后只加载图像。它只会在用户滚动图像时加载图像。

您应该只刮取网页HTML并将其加载到DOM解析器实用程序中。这应该在命令行应用程序中完成，而不是在浏览器中完成…目的是什么？你想让图片占据它应该占据的位置，即使它还没有完全加载吗？我想将图片URL提取到一个文本文件中。这没有多大意义。你能提供相关网站的链接吗？问题是，我试图从中获取图像的网站在上一个加载完成之前不会加载图像或其URL。我正在寻找一种方法，使网站认为它的图像已加载完毕，这样我就可以保留所有图像URL。是的，我明白了，但如果我尝试在页面加载完成之前运行此代码或类似代码，我会得到一个名为blank.gif的文件。我该如何做？@JackKasbrack更新了我的答案。好的，我明天会尝试。谢谢你的时间。我创建了自己的chrome扩展来做这件事。问题是你无法提取未加载的图像。你可以在chrome扩展中获得完整的DOM。然后使用上面的代码解析它并加载URL。无需等待图像下载。检查你有链接吗？检查这个链接，我以前用过它，实现起来很简单：这是chrome的扩展吗？如何设置它？您只需下载js文件（jquery.lazy.min.js）并将其包含在您的网页上，然后为所有图像提供一个类（示例：），然后将其放入脚本标记$（function（）{$（'.lazyimg'）.lazy（）；}）；-当然，你也需要jquery=）哦，抱歉，现在我明白了。那么你应该使用我正在使用的Chrome扩展插件。搜索“文本模式”，这是谷歌浏览器的扩展。它只是不加载任何网页的任何图像。我在工作中使用了这个，这样我可以更安全地浏览任何网站。data-src是未定义的。您是否已将图像元素的每个src属性都更改为data-src并已填充？没有什么可替换的，它不存在。我要加上它吗？