javascript图片懒加载

图片懒加载

当用户没有滚动到或者滑动到隐藏的图片区域时，就不加载暂时不用查看的图片，实现节省流量和更快的响应速度。

实现懒加载的方法

1.事件监听（scroll）

• window.innerHeight获取视图高度
• getBoundingClientRect().top获取图片距离视图顶部的高度

代码示例

const images = document.querySelectorAll('img') // 获取所有图片节点

window.innerHeight('scroll', (e)=>{
   images.forEach(image => { // 遍历所有的图片
      const imagesTop = image.getBoundingClientRect().top; // 获取图片距离视图顶部的高度
      if(imagesTop < window.innerHeight) { // 判断当图片距离顶部的高度小于视图高度的时候加载图片
         const data_src = image.getAttribute('data_src'); // 获取data_scr属性
         image.setAttribute('src',data_scr) // 将获取的data_src属性赋值给原本的src属性
      };
      console.log('触发scroll')
   })
})

注意： 为了防止浏览器直接获取图片，需要更改src的属性，让他无法直接获取图片路劲

使用监听事件scroll的缺点，会不断触发scroll事件，导致事件堆积影响性能

方法二

• 使用ES6新增方法 IntersectionObserver 构造函数
• observer.observe(监听DOM节点)
• observer.unobserve(取消监听DOM节点)

代码示例

const images = document.querySelectorAll('img') // 获取所有图片节点

const callback = entries =>{ // 回调函数
    entries.forEach(entry=>{ 
      if(entry.isIntersecting) { // 判断图片是否在视图区域，true在视图区，flase没在视图区
        cosnt image = entry.target // 获取图片节点
        cosnt data_src = image.getAttribute('data_src') // 获取自定义属性data_src
        image.setAttribute('src', data_src) // 当在视图区的时候将自定义属性改为原属性src
        observer.unobserve('image') // 当图片加载后取消监听
      }
    })
    console.log('看见触发，看不见在触发')
}

const observer = new IntersectionObserver(callback ) // new一个observer 实例对象

images.forEach(image=>{
   observer.observe('image') // 监听所有图片位置
})