IntersectionObserver构造函数实现图片懒加载

<style> 
    * { 
        padding: 0; 
        margin: 0; 
    } 
    .contain img { 
        width: 600px; 
        height: 400px; 
    } 
    ul { 
        list-style: none; 
    } 
    li { 
        display: inline-block; 
    } 
</style>


<div class="contain"> 
    <ul> 
        <li><img data-src="./images/iu.jpg" src='./images/lazy.png' alt=""></li> 
        <li><img data-src="./images/iu1.jpg" src='./images/lazy.png' alt=""></li> 
        <li><img data-src="./images/iu2.png" src='./images/lazy.png' alt=""></li> 
        <li><img data-src="./images/iu3.jpg" src='./images/lazy.png' alt=""></li> 
        <li><img data-src="./images/iu4.jpg" src='./images/lazy.png' alt=""></li> 
        <li><img data-src="./images/iu5.jpg" src='./images/lazy.png' alt=""></li> 
    </ul> 
</div>

IntersectionObserver构造函数根据 MDN 上的解释 IntersectionObserver()构造器创建并返回一个IntersectionObserver对象。 如果指定rootMargin则会检查其是否符合语法规定，检查阈值以确保全部在0.0到1.0之间，并且阈值列表会按升序排列。如果阈值列表为空，则默认为一个[0.0]的数组。

• callback 当元素可见比例超过指定阈值后，会调用一个回调函数，此回调函数接受两个参数：
• entries 一个IntersectionObserverEntry对象的数组，每个被触发的阈值，都或多或少与指定阈值有偏差。
• observer 被调用的IntersectionObserver实例。

window.addEventListener('scroll', function () { 
    let imgs = [...document.querySelectorAll('.img')] 
    const callback = entries => { // entries 是观察的元素数组 
        entries.forEach(ele => { 
            if (ele.isIntersecting) { // isIntersecting 是否被观察到 
                const data_src = ele.target.getAttribute('data-src'); //这里基本和 Method1/Method2一样 
                ele.target.setAttribute('src', data_src); // ele.target 是目标元素 
                observe.unobserve(ele.target) // 真实地址替换后 取消对它的观察 
             } 
         }) 
    }; 
    const observe = new IntersectionObserver(callback); // 实例化 IntersectionObserver 
    imgs.forEach(image => { 
        observe.observe(image) // observe : 被调用的IntersectionObserver实例。给每个图片添加观察实例 
    }) 
}

原文：原生JavaScript三种方法实现懒加载lazyLoad - 掘金 (juejin.cn)