这些天我看到了很多站点，主要是教程站点，这些站点包含很多图像，并且一旦进入查看端口，它们仅将图像加载到页面的更下方？
我将如何去做？向下滚动页面时，视口下方的图像会淡入
用占位符替换图像（例如，只需将“ 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
}
});
})
});
不依赖于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>
<img loading="lazy"
我们现在越来越多地支持这种标准化的无JavaScript方法，这非常令人兴奋！
您可以在下面的代码段中看到此内容。
要查看加载实际上是延迟的，请在“网络”选项卡中打开Chrome DevTools。
然后，当您向下滚动片段时，您将看到图像仅在看到它们时才加载。
.separator {
height: 1000px;
width: 100px;
border: 5px solid red;
}
img {
height: 340px;
border: 5px solid black;
}<div><img loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/5/56/Donald_Trump_official_portrait.jpg"></div>
<div class="separator"></div>
<div><img loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/8/8d/President_Barack_Obama.jpg"></div>
<div class="separator"></div>
<div><img loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/d/d4/George-W-Bush.jpeg"></div>
<div class="separator"></div>
<div><img loading="lazy" src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Bill_Clinton.jpg"></div>
<div class="separator"></div>
<div><img loading="lazy" 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" src="https://upload.wikimedia.org/wikipedia/commons/1/16/Official_Portrait_of_President_Reagan_1981.jpg"></div>在Chromium Chromium 81中测试。
IntersectionObserver最小可运行示例
这本质上是在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
此技术只是以下各项的组合：
在Chromium 76中测试。