图片懒加载
当用户没有滚动到或者滑动到隐藏的图片区域时,就不加载暂时不用查看的图片,实现节省流量和更快的响应速度。
实现懒加载的方法
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') // 监听所有图片位置
})