借助 IntersectionObserver API 实现图片懒加载


        通常是使用监听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);
});


声明:BenBonBen博客|版权所有,违者必究|如未注明,均为原创

转载:转载请注明原文链接 - 借助 IntersectionObserver API 实现图片懒加载


过去太迟,未来太远,当下最好