Javascript 用java脚本在网站上更快地加载图像

我正在尝试将照片从计算机上的本地文件导入HTML文件。我已经设法做到这一点，但我需要加快所需的时间加载到页面上，2.4分钟。我的想法是加载一个较小的文件大小的图像，200px乘以200px，然后在背景中加载完整大小的图像。我遇到的问题是，我无法将从本地文件加载图像的代码与延迟加载代码集成在一起。有人能帮忙吗

const$span=$（“span”）；
常数{
长度
}=$spans；
$spans.每个（功能（i）{
$（此）。追加（“”）；
});
在上载图像供网站使用之前，您应该先对其进行优化，以防止加载时间缓慢/当前问题

由于图像似乎存储在本地文件夹中，我建议首先备份包含图像的文件夹[到外部硬盘或硬盘的其他区域]

然后，访问一个图像压缩站点（例如，-我使用这个，但还有其他站点，例如），压缩图像将大大减小文件大小，但图像看起来是一样的。您可以一次上载多个图像，并以zip格式下载压缩图像包。请确保在提取图像时，图像的名称与您所希望的一致（并且图像末尾没有“1”[通常添加，以指示该文件是副本/2版]）

当您使用较小的图像运行代码时，您会发现处理时间大大减少

希望这有帮助

旁注-上述两个网站都处理JPG和png格式-网站名称可能会误导人！：）
 我会研究如何使用惰性加载图像，在整个主题上有一个非常好的解决方案

这方面的一个基本例子是：

更改您的

数据集

在“视口”中查看元素时，这些指向要加载的图像。

示例：

<img class="lazy" src="placeholder.jpg" data-src="lazy-img-1x.jpg" data-srcset="lazy-img-1x.jpg 1x">

从指南中可以看到一个更好的例子。
2.4分钟是一段很长的时间。大致来说，你要加载多少张图片？你的标题也与问题的主体相冲突。看起来“先加载较小的图像”并不是您试图解决的问题，而是为了让图像加载更快。请添加更多详细信息。您好，我在寻找延迟加载的方法时看到了类似的版本，但我的问题是尝试让延迟加载与我已经获得的代码一起工作。我相信您可以从我的答案中获取函数，而不是在jQuery文件中。我还使用示例中的图像标记预先填充HTML。然后我遇到的问题是，我无法从目录中动态加载所有图像。我明白了。我们可能需要你在这个问题上给出一个更完整的例子。您正在将图像附加到“this”中，但您是否100%确定运行时的“this”是什么？也许可以尝试在循环中添加一个“debugger”语句来查看发生了什么。另外，我会通过添加一个类来选择“”，然后使用一个类来选择它，以获得最佳实践。
document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});