时间戳

首页 > 解决方案 > 用java脚本在网站上更快地加载图像

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

问题描述

我正在尝试将照片从计算机上的本地文件导入 HTML 文件。我已经设法做到这一点，但我需要加快加载页面所需的时间，2.4 分钟。我的想法是加载图像的较小文件大小，200 像素 x 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>

标签： javascriptjqueryhtmlcss

解决方案

我会考虑使用交叉点观察者API来延迟加载图像，关于这整个主题有一个优秀的谷歌开发者指南。

一个基本的例子是：

更改您的<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
  }
});

这是指南中的 CodePen以及更好的示例。

推荐阅读