图片懒加载

图片懒加载

1. 监听页面的滚动事件，当滚动位置到图片的top位置时加载图片；

        let imgs = document.querySelectorAll('img');
        imgs = Array.prototype.slice.apply(imgs);
        console.log(imgs)
        //监听页面滚动
        window.addEventListener('scroll', function () {
            //监听图片所在高度和滚动的距离
            //获取页面高度
            // console.log(window.innerHeight)
            //获取监视图片的相对视图的top顶部（y）位置
            let vh = window.innerHeight;
            // console.log(img.getBoundingClientRect().top);

            //当图片的top位置小于或等于视图高度时就可以加载
            imgs.forEach(i => {
                if (i.getBoundingClientRect().top < vh) {
                    let src = i.getAttribute('data-src');
                    i.setAttribute('src', src);
                    setTimeout(() => {
                        imgs.splice(i, 1);
                    }, 6000)
                }
            })
        })

2. 使用IntersectionObserver观察图片与可视区域的相交情况来加载图片；

function callback(entries, observer) {
 //entries 被观察者集合数组
 // console.log(entries)
 //entries中每个元素具有的isIntersecting属性表示当前被观察者是否与可视区域相交
 //entries中每个元素具有的target属性表示被观察者的dom节点
 //observer => 被调用的IntersectionObserver实例。
 // console.log(observer)
     entries.forEach(entry => {
      //当视图滚动到图片的位置时加载
        if (entry.isIntersecting) {
            let currentImg = entry.target;
            let src = currentImg.getAttribute('data-src');
            currentImg.setAttribute('src', src);
            //取消观察已加载的图片
            observer.unobserve(currentImg);
         }
     })
  }
let observer = new IntersectionObserver(callback);

//观察所有图片
imgs.forEach(img => {
  observer.observe(img);
})

MDN关于IntersectionObserver的描述
IntersectionObserver的浏览器兼容情况