加载与页面加载分开的图像

Question

我目前正在使用延迟加载图像，其中所有图像在页面加载时加载并在图像加载后显示。 在此方法中，页面显示在浏览器的选项卡部分加载，直到下载所有图像。

现在，我想加载与页面加载分开的图像。 就像在谷歌图片中一样，页面在 1 秒内加载完毕，并且图片是一张一张地加载的，而不会在浏览器的选项卡中显示页面加载。

我怎样才能做到这一点？

所以，最后一个问题：如何首先完全加载页面，而不从服务器下载图像，然后在到达滚动条时下载图像。 到那时，图像可能是一个灰色框。

Answer 1

当图像进入视野时加载图像。

加载属性

我们可以使用带有loading 属性的本地延迟加载。

这是一个演示。

<div><img src="https://placeimg.com/410/410/any" loading="lazy" width="410" height="410"></div>

目前Chrome最新版Firefox和Edge支持原生懒加载。

请注意，距离阈值在浏览器中确实有所不同。

铬合金

延迟内容开始加载的距离阈值取决于当前有效连接类型以及是否启用精简模式等因素。 选择距离，以便延迟内容几乎总是在它变得可见时完成加载。

Firefox

告诉用户代理推迟加载图像，直到浏览器估计将立即需要它。 例如，如果用户正在滚动文档，lazy 值将导致图像仅在它出现在窗口的可视视口中之前不久被加载。

路口观察员

我们还可以使用IntersectionObserver API来确定您的图像何时在视图中。 这提供了更好的跨浏览器兼容性，并为我们的图像加载的时间和方式提供了更好的控制。

代码笔

HTML

<div>
    <img src="data:," 
        data-src="https://placeimg.com/410/410/any" 
        class="lazy" 
        alt="" 
        width="410" 
        height="410" />
</div>

JS

document.addEventListener("DOMContentLoaded", lazyLoad);

function lazyLoad() {
  const images = [].slice.call(document.querySelectorAll("img.lazy"));
  var config = {
    // If the image gets within 500px in the Y axis, start the download.
    rootMargin: "500px 0px",
    // detect when visibility passes the 1% mark
    threshold: 0.01
  };

  if ("IntersectionObserver" in window) {
    const observer = new IntersectionObserver(showImage, config);

    images.forEach(function (image) {
      observer.observe(image);
    });
  }
}

function showImage(entries, observer) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      const image = entry.target;
      image.src = image.dataset.src;

      observer.unobserve(image);
    }
  });
}

现有图书馆

还有现有的 JavaScript 库，例如lazySizes 。