图片懒加载

[Sunny Fu]

图片懒加载

[beary]

const images = document.querySelectorAll("image");
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
images.forEach((image) => {
  observer.observe(image);
});

[beary]

补充：react可以直接用组件

[vuemenow]

const images = document.querySelectorAll("img")

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        // 判断当前元素是否可见
        if (entry.isIntersecting) {
            // 创建一个自定义属性data-src存放真正要显示的图片路径，原本img自带的src放一张默认图片
            const img = entry.target
            const data_src = img.getAttribute('data-src')
            img.setAttribute('src', data_src)
            // 解除观察，有几张图片就触发几次
            observer.unobserve(img)
        }
    })
})

images.forEach(image => {
    // 对每一个图片对象进行观察
    observer.observe(image)
})