使用javascript在网站上更快地加载图片

问题描述 投票:1回答:1

我试图将计算机上的本地文件中的照片导入我的HTML文件。我已设法做到这一点,但我需要加快加载页面所需的时间,2.4分钟。我的想法是加载一个较小的图像文件大小,200像素×200像素,然后在后台加载完整大小的图像。我遇到的问题是我无法使用延迟加载代码集成从本地文件加载图像的代码。有人可以帮忙吗?

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>
javascript jquery html css
1个回答
2
投票

我会考虑使用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有一个更好的例子。


1
投票

在上传图像以供在网站上使用之前,您应首先对其进行优化,以防止加载时间过长/当前问题。

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

然后,访问图像压缩站点(如tinypng, - 我使用此但有其他,例如CompressJpeg)压缩图像将大大减少文件大小,但图像将显示相同。您可以一次上传多个图像,并以zip格式下载压缩图像包。确保在提取图像时,它们按照您的意愿命名(并且它们最后没有'1'[通常添加,以表明该文件是副本/第2版])

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

希望这可以帮助

附注 - 前面提到的网站都处理jpg和png格式 - 网站名称可能会产生误导! :)

© www.soinside.com 2019 - 2024. All rights reserved.