Vue自定义指令实现图片懒加载
其实实现懒加载的方式有很多了,现在也有很多插件(比如:vue-lazyload等),element-ui库中也有图片懒加载的方式,所以大家根据自己的喜欢选择就可以了?
IntersectionObserver?
首先要用到这么个API,直接可以用的哈,它可以很方便的帮我们监视某个dom元素是否出现在可视区域内?
使用起来也很方便?
// 观察者
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
// 如果元素出现在可视区域内,和离开可视区域的时候被触发
if(isIntersecting) {
}
})
// 开启观察(传入要观察的dom元素)
observer.observe(el)
?
这是其中的一些方法?
下面介绍Vue中自定义指令实现懒加载:?
可以在src下新建directive/index.js?
import Vue from 'vue'
// 图片懒加载
Vue.directive('lazy', {
inserted(el) {
const imgSrc = el.src
el.src = ''
// 观察者
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
// 如果元素出现在可视区域内,和离开可视区域的时候被触发
if(isIntersecting) {
// 出现在可视区域,再加载图片
el.src = imgSrc
// 停止观察
observer.unobserve(el)
}
})
// 开启观察(传入要观察的dom元素)
observer.observe(el)
}
})
然后在main.js中引入以下?
import './directive'
然后直接使用就可以了?
<template>
<div class="home">
<!-- 模拟滚动 -->
<div style="height: 1000px;"></div>
<!-- 三张图片懒加载 -->
<div v-for="item in 3" :key="item">
<img v-lazy :src="require(`../assets/${ item }.png`)" alt="">
</div>
</div>
</template>
其实挺简单的一个东西的,这篇主要是想记录下?IntersectionObserver 这个API,之前还真不知道,之前我都是监听元素的scroll滚动事件,然后用scrollTop去计算,来判断某个dom是否出现在可视区域内,现在知道了IntersectionObserver API , 真是方便多了
|