图片懒加载

图片懒加载

  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)
                }
            })
        })
  1. 使用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的浏览器兼容情况

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值