javascript - 如何让图像仅在视口(viewport)中延迟加载？

Question

最近我看到很多网站，主要是教程网站，它们有很多图像，而且它们只在图像进入视口(viewport)后才将图像加载到页面下方？

我该怎么做呢？当您向下滚动页面时，视口(viewport)下方的图像会淡入

Answer 1

<img loading="lazy"没有任何 Javascript 就可以做到

我们现在越来越多地支持这种标准化的非 JavaScript 方法，这非常令人兴奋!

• https://caniuse.com/#feat=loading-lazy-attr
• https://html.spec.whatwg.org/multipage/embedded-content.html#attr-img-loading

您可以在下面的代码片段中看到这一点。

要看加载其实是懒惰的，打开Chrome DevTools在“网络”选项卡中。

然后，当您向下滚动代码段时，您会看到图像仅在您看到它们时加载。

我还添加了一个可选的 JavaScript 按钮，以表明您可以更改 lazy回到默认 eager来自 JavaScript，然后图像将立即开始加载。

document.getElementById('load-now').addEventListener('click', function(){
  for (const img of document.getElementsByTagName('img')) {
    img.loading = 'eager';
  }
});

.separator {
    height: 1000px;
    width: 100px;
    border: 5px solid red;
}
img {
    height: 340px;
    border: 5px solid black;
}
  #load-now {
  border: 5px solid black;
  }

<div id="load-now">Click me to load all images now!</div>
<div><img loading="lazy" height="340" src="https://upload.wikimedia.org/wikipedia/commons/5/56/Donald_Trump_official_portrait.jpg"></div>
<div class="separator"></div>
<div><img loading="lazy" height="340" src="https://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg"></div>
<div class="separator"></div>
<div><img loading="lazy" height="340" src="https://upload.wikimedia.org/wikipedia/commons/d/d4/George-W-Bush.jpeg"></div>
<div class="separator"></div>
<div><img loading="lazy" height="340" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Bill_Clinton.jpg"></div>
<div class="separator"></div>
<div><img loading="lazy" height="340" src="https://upload.wikimedia.org/wikipedia/commons/9/90/George_H._W._Bush%2C_President_of_the_United_States%2C_1989_official_portrait_%28cropped%29.jpg"></div>
<div class="separator"></div>
<div><img loading="lazy" height="340" src="https://upload.wikimedia.org/wikipedia/commons/1/16/Official_Portrait_of_President_Reagan_1981.jpg"></div>

关于此方法的一个非常酷的事情是它完全是 SEO 友好的，因为 src=属性像往常一样包含图像源，另请参阅:Lazy image loading with semantic markup

在 Chromium Chromium 81 和 Firefox 77.0.1 中测试，两者都可以工作并延迟加载。

IntersectionObserver最小的可运行示例

这是一个可以在 img loading="lazy" 之前工作的 JavaScript 方法已实现。

这基本上是在以下位置使用的技术:https://appelsiini.net/projects/lazyload/在以下位置提到:https://stackoverflow.com/a/2322042/895245

Web API 现在已经发展得如此之快，从头开始编写代码并不难!

var observer = new IntersectionObserver(
    (entries, observer) => {
        entries.forEach(entry => {
            if (entry.intersectionRatio > 0.0) {
                img = entry.target;
                if (!img.hasAttribute('src')) {
                    alert('will load the image!!!');
                    img.setAttribute('src', img.dataset.src);
                }
            }
        });
    },
    {}
)
for (let img of document.getElementsByTagName('img')) {
    observer.observe(img);
}

.separator {
    height: 1000px;
    width: 100px;
    border: 5px solid red;
}
img {
    height: 340px;
    border: 5px solid black;
}

<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/5/56/Donald_Trump_official_portrait.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d4/George-W-Bush.jpeg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Bill_Clinton.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/9/90/George_H._W._Bush%2C_President_of_the_United_States%2C_1989_official_portrait_%28cropped%29.jpg"></div>
<div class="separator"></div>
<div><img data-src="https://upload.wikimedia.org/wikipedia/commons/1/16/Official_Portrait_of_President_Reagan_1981.jpg"></div>

整页演示:https://cirosantilli.com/web-cheat/js-image-load-viewport.html

GitHub 上游:https://github.com/cirosantilli/cirosantilli.github.io/blob/1f637bf4791b115777300f48f427f0a6bb409fc1/web-cheat/js-image-load-viewport.html

此技术只是以下技术的组合:

• What is the best JavaScript code to create an img element
• How can I tell if a DOM element is visible in the current viewport?

在 Chromium 76 中测试。

将加载顺序更改为最近的第一个

这是 loading="lazy" 之后缺少的最后一个用例对我来说:一种急切下载的方法，但将下载顺序更改为首先在视口(viewport)上下载，然后在下方，然后在上方:Change loading order of images already on page

也许我们可以用 querySelectorAll() 做点什么解决jQuery find next/prev elements of a certain class but not necessarily siblings然后删除 loading=lazy来自 JavaScript 中的图像!这既可以优雅地降级，又对 SEO 友好。

最后一个问题是如何获取第一个可见元素:

• How to get the first DOM element that is visible in a viewport?
• How to select the last element on viewport

我还没有看到一个很好的解决方案。

延迟加载视频

不知道为什么，但 Chromium 81 和 Firefox 77.0.1 都不能延迟加载视频，现在知道他们为什么只为 img 这样做了？

Chromium 81 确实为 iframe 实现了它然而，这是 YouTube 嵌入使用的，而 Firefox 77.0.1 没有:lazy load iframe (delay src http call) with jquery