原生jsは画像の怠け者のロードを実現します
まず、ピクチャリロードとは何かを話しましょう.ピクチャがたくさんあるページを開くと、ページで見たピクチャだけをロードし、ページの下にスクロールしてから、必要なピクチャをロードします.そして、なぜ画像の怠惰なロードを実現するのでしょうか.リクエスト数を減らしたり遅らせたりするため、ブラウザの圧力を緩和し、ユーザー体験を強化します.
，
，
，
<body>
<img src="./img/loading.gif" lazyload-src="./img/1.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/2.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/3.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/4.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/5.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/6.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/7.jpg" alt="">
<img src="./img/loading.gif" lazyload-src="./img/8.gif" alt="">
<img src="./img/loading.gif" lazyload-src="./img/9.jpg" alt="">
<script>
function lazyLoad(){
var imgs=document.querySelectorAll("img");
var innerH= window.innerHeight;
var scrollY= window.scrollY;
for(let i=0;i<imgs.length;i++){
if( innerH+scrollY > imgs[i].offsetTop ){
// console.log(" "+i+" ")
setTimeout(function(){
imgs[i].src= imgs[i].getAttribute("lazyload-src")
},200)
}
}
}
lazyLoad()
window.onscroll=function(){
lazyLoad() //
}
</script>