vue | 图片懒加载

懒加载其实就是延时加载

因为浏览器的可视范围是有限的，所以滚动到所需要显示的位置时在进行加载

 

方法一：事件监听（监听scroll这个事件，鼠标滚动触发）

前提：需得知窗口显示区的高度（通过window.innnerHeight获取）=>  高度1

　　　需得知图片到视窗上边的距离高度（通过用元素的getBoundingClientReact().top来获取） => 高度2

思路：如果图片未能被看见那么说明 高度2 > 高度1 ，反之 高度2 < 高度1 

实现：

// html部分的代码
<img data-src="1.png">
<img data-src="2.png">
<img data-src="3.png">

// js部分的代码
// 获取所有的img标签
const images = document.querySelectorAll('img')
window.addEventListener('scroll', (e) => {
    images.forEach(image => {
        const imageTop = image.getBoundingClientRect().top
        if (imageTop < window.innerHeight) {
            const data_src = image.getAttribute('data-src');
            image.setAttribute('src', data_src)
        }
    })
})

但是！此方法并不推荐使用，因为此方法滚动事件被触发了太多次，消耗大量资源。

 

 

方法二：IntersectionObeserver (是浏览器的构造函数)

实现：

// html部分和上个方法一样
// js部分如下
const images = document.querySelectorAll('img')
// callback是回调函数，，那么一般是需要触发条件才能执行的，一般触发两次（一次为看见目标元素时，另一次为目标元素卡看不见时）
const callback = entries => {
    entries.forEach(entry => {
        // console.log(entry)
        // entry.isIntersecting为目标元素
        if (entry.isIntersecting) {
            const image = entry.target
            const data_src = image.getAttribute('data-src')
            image.setAttribute('src', data_src)
            // 结束观察，有几张图片就会触发几次
            observer.unobserve(image)
        }
    })
}
// 因为IntersectionObserver是构造函数，所以第一步要new一个实例
const observer = new IntersectionObserver(callback)
images.forEach(image => {
        // 开始观察
        observer.observer(image)
})