Question

I am trying to import photos from a local file on my computer to my HTML file. I have managed to do this but I need to speed up the time it takes to load in on the page, 2.4mins. Can anyone help?

const $spans = $("span");
const {
  length
} = $spans;
$spans.each(function(i) {
  $(this).append("<img src='Images/With Out Logo/Insta Photo-" + (length - i) + ".JPG' />");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<span class="Images"></span>

Answer 1

我会考虑使用intersection observerAPI来延迟加载图像，在整个主题上都有出色的Google Developer Guide。

一个基本的例子是：

更改您的<img>标签以添加：

data-src
data-srcset

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

示例：

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

然后在<script>标记中或您运行页面代码的任何地方，都有一个监听DOMContentLoaded事件的函数：

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

Here's a CodePen，其中有一个更好的示例。

Answer 2

在上传图片以在网站上使用之前，您应该先优化，以防止加载时间慢/当前问题。

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

然后，访问图像压缩站点（例如tinypng，-我使用此站点，但还有其他站点，例如CompressJpeg）。压缩图像会大大减小文件大小，但是图像看起来会相同。您可以一次上传多个图像，也可以将压缩图像包作为zip下载。请确保在提取图像时，将它们命名为您想要的名称（并且它们的末尾没有'1'[通常添加，以表示该文件是副本/ 2nd版本））< / p>

使用较小的图像运行代码时，应该发现处理时间大大减少了。

希望这会有所帮助

旁注-上述两个网站均处理jpgs和png格式-网站名称可能会引起误解！：）

Loading in smaller images first

2 个答案: