预览
使用 intersectionObserver的目的就是一切从简,用着感觉一切正常
实现代码
为了项目全局使用,注册个全局自定义指令
- 首先在main.js中
import { lazyImg } from './utils/directives'
app.directive('lazyImg', lazyImg)
- lazyImg 代码部分
为了每次图片显示时候有点动画效果,style添加了中transform属性
export const lazyImg = {
// 在绑定元素的 attribute 前
// 或事件监听器应用前调用
created(el, binding, vnode, prevVnode) {
// 下面会介绍各个参数的细节
},
// 在元素被插入到 DOM 前调用
beforeMount(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都挂载完成后调用
mounted(el, binding, vnode, prevVnode) {
const observe = new IntersectionObserver((entry) =>{
// entry是一个数组
entry.forEach(item => {
el.style.transition = 'all 1s ease'
//item.isIntersecting为true时候就证明在窗口内,否则不在
if(item.isIntersecting) {
el.setAttribute('src', binding.value)
el.style.transform = ''
// observe.unobserve(el) //添加这个之后只执行一次
} else {
el.style.setProperty('transform', 'scale(0.9)')
}
})
})
// 把el绑定上去
observe.observe(el)
},
// 绑定元素的父组件更新前调用
beforeUpdate(el, binding, vnode, prevVnode) {},
// 在绑定元素的父组件
// 及他自己的所有子节点都更新后调用
updated(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载前调用
beforeUnmount(el, binding, vnode, prevVnode) {},
// 绑定元素的父组件卸载后调用
unmounted(el, binding, vnode, prevVnode) {}
}
- 使用
<!-- item.img为变量时候 -->
<img v-lazyImg='item.img' alt="">
<!-- 或者 -->
<img v-lazyImg="'/src/assets/images/homeImages/home7/img2.png'" alt="">