懒加载

啥也不说直接上代码

index.js

var viewHeight =window.innerHeight//获取可视区高度
console.log(viewHeight)
function inSight(el) {
    console.log('it is seen');
    
    return el.getBoundingClientRect().top < viewHeight;
}

function loadImg(el) {
    if (el.src) { 
        el.src = el.dataset.original;
    }
}
function checkImgs() {
    
    const imgs = document.getElementsByTagName('img');
    Array.from(imgs).forEach(el => {
        if (inSight(el)) {
            loadImg(el);
        }
    })
}
window.addEventListener('scroll', checkImgs, false);
window.onload = checkImgs;

index.html

<img src="" class="image-item" lazyload="true"  data-original="images/1.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/2.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/3.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/4.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/5.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/6.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/7.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/8.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/9.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/10.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/11.jpg"/>
<img src="" class="image-item" lazyload="true"  data-original="images/12.jpg"/>

index.css

      .image-item {
	    display: block;
	    margin-bottom: 50px;
	    height: 400px
	}