SOURCE

let observeImg = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
        if (entry.intersectionRatio > 0 && entry.intersectionRatio <= 1) {
            entry.target.src = entry.target.dataset.src;
        }
        // entry.target.src = entry.target.dataset.src;
        // observer.unobserve(entry.target);
    }, {
        // root: document.getElementById('id2'),
        // root: null,
        // threshold: [0.5],
    });
})

document.querySelectorAll('img').forEach(img => observeImg.observe(img));

<div id="id2"></div>
<div id="id1"></div>
<img data-src="http://c.hiphotos.baidu.com/zhidao/pic/item/d009b3de9c82d1587e249850820a19d8bd3e42a9.jpg" src="http://pic3.16pic.com/00/01/11/16pic_111395_b.jpg">
<img data-src="http://c.hiphotos.baidu.com/zhidao/pic/item/d009b3de9c82d1587e249850820a19d8bd3e42a9.jpg" src="http://img3.imgtn.bdimg.com/it/u=2534506313,1688529724&fm=26&gp=0.jpg">
<img data-src="http://c.hiphotos.baidu.com/zhidao/pic/item/d009b3de9c82d1587e249850820a19d8bd3e42a9.jpg" src="http://t7.baidu.com/it/u=888206991,1760071208&fm=191&app=48&size=h300&n=0&g=4n&f=JPEG?sec=1853310920&t=cc5d57a46142087a2aa2124099bc6eec">

img {
    width: 200px;
    height: 200px;
    position: relative;
    top: -300px;
}

#id1 {
    width: 400px;
    height: 1000px;
}

#id2 {
    width: 300px;
    height: 300px;
    position: fixed;
    background: red;
}