这些天我看到了很多网站，主要是教程网站，它们有很多图像，一旦进入视口，它们只会在页面下方加载图像？
我该怎么做呢？当您向下滚动页面时，视口下方的图像会淡入
如何使图像仅在视口中时才延迟加载？
IT技术
javascript
jquery
2021-03-03 18:42:29
4个回答
<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 按钮，以表明您可以从 JavaScript更改lazy回默认值eager，然后图像将立即开始加载。
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=属性像往常一样包含图像源，另请参阅：带有语义标记的延迟图像加载
在 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
该技术只是以下各项的组合：
在铬 76 中测试。
将加载顺序更改为最近的第一个
这是loading="lazy"我缺少的最后一个用例：一种急切下载的方法，但将下载顺序更改为首先在视口上下载，然后在下方，然后在上方：更改页面上已有图像的加载顺序
也许我们可以做点什么querySelectorAll()来解决jQuery 查找某个类的 next/prev 元素但不一定是兄弟姐妹的问题，然后loading=lazy从 JavaScript 中的图像中删除！这既会优雅地降级，又会对 SEO 友好。
最后一个问题是如何获取第一个可见元素：
我还没有看到一个很好的解决方案。
延迟加载视频
不知道为什么，但无论是 Chromium 81 还是 Firefox 77.0.1 都不能延迟加载视频，现在确定他们为什么这样做只是为了img？
iframe然而，Chromium 81 确实实现了它，这是 YouTube 嵌入使用的，而 Firefox 77.0.1 没有：使用 jquery 延迟加载 iframe（延迟 src http 调用）
不依赖于 JQuery 的简单解决方案：
<script type="text/javascript">
refresh_handler = function(e) {
var elements = document.querySelectorAll("*[realsrc]");
for (var i = 0; i < elements.length; i++) {
var boundingClientRect = elements[i].getBoundingClientRect();
if (elements[i].hasAttribute("realsrc") && boundingClientRect.top < window.innerHeight) {
elements[i].setAttribute("src", elements[i].getAttribute("realsrc"));
elements[i].removeAttribute("realsrc");
}
}
};
window.addEventListener('scroll', refresh_handler);
window.addEventListener('load', refresh_handler);
window.addEventListener('resize', refresh_handler);
</script>
用占位符替换您的图像（例如，只需将“src”属性更改为其他内容，这样图像就不会加载，但 url 仍然可以访问），然后将窗口滚动事件绑定到一个函数，该函数将在当前滚动位置，并将图像 src 交换为真正的 img 标签。
这是代码。它未经测试，但这应该是基本思想：
<img src="" realsrc="/myimage.png" />
$(document).ready(function(){
$(window).scroll(function(){
$('img[realsrc]').each(function(i){
var t = $(this);
if(t.position().top > ($(window).scrollTop()+$(window).height()){
t.attr('src', t.attr('realsrc')); // trigger the image load
t.removeAttr('realsrc'); // so we only process this image once
}
});
})
});