SOURCE

window.onload = ()=>{

    window.addEventListener('scroll',()=>{
        let img = document.querySelector('.img');
        let wrap = document.querySelector('.img-wrap');
        // img.setAttribute('src',img.getAttribute('data-img'))

        //窗口的高度
        let windowHeight = window.outerHeight;
   
        //滚动了的高度
        let scrollHeight = window.scrollY;
        
        //盒子的高度
        let wrapHeight = wrap.clientHeight;
        //盒子距离顶部的高度
        let wrapOffsetTop = wrap.offsetTop
        let A = scrollHeight + windowHeight;
        let B = wrapHeight + wrapOffsetTop;
        if(A >= B){
        img.setAttribute('src',img.getAttribute('data-img'))
        }
    })


}


console.log(document.querySelectorAll('[class=img-wrap]'))

<div class="img-wrap" name='joke'>
    <img src='' class="img" data-img='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F050221114535%2F210502114535-5-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660443533&t=0181ee4a02e40fc4aa50d20beaa9eb1f'/>
</div>
<div class="img-wrap" name='joke'></div>
<div class="img-wrap" name='joke'></div>
<div class="img-wrap" name='joke'></div>
<div class="img-wrap" name='joke'></div>
<div class="img-wrap" name='joke'></div>

.img-wrap{
    height: 100px;
    width: 200px;
    background-color: #ccc;
    margin: 2000px auto;
}

img{
    width: 100%;
    min-height: 100%;
    
}