图片懒加载
目的： 当图片进入可视区域内去加载图片，且处理加载失败，封装成指令。
介绍一个webAPI：IntersectionObserver(opens new window)
// 创建观察对象实例
const observer = new IntersectionObserver(callback[, options])
// callback 被观察dom进入可视区离开可视区都会触发
// - 两个回调参数 entries , observer
// - entries 被观察的元素信息对象的数组 [{元素信息},{}]，信息中isIntersecting判断进入或离开
// - observer 就是观察实例
// options 配置参数
// - 三个配置属性 root rootMargin threshold
// - root 基于的滚动容器，默认是document
// - rootMargin 容器有没有外边距
// - threshold 交叉的比例
// 实例提供两个方法
// observe(dom) 观察哪个dom
// unobserve(dom) 停止观察那个dom
基于vue3.0和IntersectionObserver封装懒加载指令
src/components/library/index.js
export default {
install (app) {
app.component(XtxSkeleton.name, XtxSkeleton)
app.component(XtxCarousel.name, XtxCarousel)
app.component(XtxMore.name, XtxMore)
+ defineDirective(app)
}
}
import defaultImg from '@/assets/images/200.png'
// 指令
const defineDirective = (app) => {
// 图片懒加载指令
app.directive('lazyload', {
mounted (el, binding) {
const observer = new IntersectionObserver(([{ isIntersecting }]) => {
if (isIntersecting) {
observer.unobserve(el)
el.onerror = () => {
el.src = defaultImg
}
el.src = binding.value
}
}, {
threshold: 0.01
})
observer.observe(el)
}
})
}
使用指令：
src/views/home/component/home-product.vue
<RouterLink class="cover" to="/">
+ <img alt="" v-lazyload="cate.picture">
<strong class="label">
<span>{{cate.name}}馆</span>
<span>{{cate.saleInfo}}</span>
</strong>
</RouterLink>
src/views/home/component/home-goods.vue
<RouterLink to="/" class="image">
+ <img alt="" v-lazyload="goods.picture" />
</RouterLink>
``src/views/home/component/home-product.vue`
<RouterLink class="cover" to="/">
+ <img v-lazyload="item.picture" alt="">
<strong class="label">
<span>{{item.name}}馆</span>
<span>{{item.saleInfo}}</span>
</strong>
</RouterLink>
总结：
在img上使用使用v-lazyload值为图片地址，不设置src属性。
