SOURCE

window.onload=checkImgs;
		  
function checkImgs() {
    const imgs = Array.from(document.querySelectorAll("img"));
    imgs.forEach(item => io.observe(item));
}

function loadImg(el) {
    const source = el.dataset.src;
    el.src = source;
}

const io = new IntersectionObserver(ioes => {
    ioes.forEach(ioe => {
        console.log(ioe)
        const el = ioe.target;
        const intersectionRatio = ioe.intersectionRatio;
        if (intersectionRatio > 0 && intersectionRatio <= 1) {
        loadImg(el);
        }
        el.onload = el.onerror = () => io.unobserve(el);
    });
});

<div class="container">
    <div class="img-area">
        <img src='https://hbimg.huabanimg.com/675a9b3ccdb7bde620c0a43daf7c7178a1c4552ea09e-9Q9ZHk_fw658' data-src="https://hbimg.huabanimg.com/a2a2798dbb577e858c62a850a6c03550fe097c69102185-H5iRia_fw658"/>
    </div>
    <div class="img-area">
        <img src='https://hbimg.huabanimg.com/675a9b3ccdb7bde620c0a43daf7c7178a1c4552ea09e-9Q9ZHk_fw658' data-src="https://hbimg.huabanimg.com/e30c18da9f84b5aa3e3f2661345a7942202d2aad1909bf-dmnIrk_fw658"/>
    </div>
    <div class="img-area">
        <img src='https://hbimg.huabanimg.com/675a9b3ccdb7bde620c0a43daf7c7178a1c4552ea09e-9Q9ZHk_fw658' data-src="https://hbimg.huabanimg.com/dcd00752fe974f8280b8297e59983c9d8797589413bf0b-gZ3byJ_fw658"/>
    </div>
</div>

.container{
    width:100%;
}
.img-area{
    height:600px;
    text-align: center
}
img{
    width: 300px;
    height: 300px;
}