通常是使用监听scroll或者使用setInterval来判断,元素是否进入视图,其中scroll由于其特别大的计算量,会有性能问题
        所以在2016年初,chrome51率先提供了一个新的API,就是IntersectionObserver,它可以用来监听元素是否进入了设备的可视区域之内,而不需要频繁的计算来做这个判断。现在越来越多浏览器兼容此api。
示例
<img data-src="/assets/images/newNBB/pc_index/company/c26.png" alt="太平洋健康险"  class="lazy-loaded" />
const images = document.querySelectorAll('.lazy-loaded');
const callback = (entries) => {
    entries.forEach((entry) => {
        if (entry.isIntersecting) {
           const image = entry.target;
           const data_src = image.getAttribute('data-src');
           image.setAttribute('src', data_src);
           observer.unobserve(image);
        }
    });
};
const observer = new IntersectionObserver(callback);
images.forEach((image) => {
    observer.observe(image);
});



              
              