图片懒加载在日常开发过程中经常会使用到,一般情况下的实现思路是先判断图片是否出现在页面内,然后替换图片的src属性从而控制图片的加载。这一思路比较简单,但是每次使用时都需要重复计算图片的距离页面高度,比较繁杂,这一次通过Vue的自定义指令实现图片懒加载,只需要在需要图片需要懒加载时将src改为对应的指令即可,使用非常方便。
具体使用方式:
<img class="img" v-lazyload="imgSrc" alt="">
此处主要应用的Vue的Vue.directive功能,实现了一个lazyload的自定义组件。
懒加载功能的实现主要通过IntersectionObserverAPI,这个API可以获取到元素和视窗之间是否有交叉,以及交叉部分的尺寸位置等,是一个用途很广泛的API。
实现代码:
// lazyload.js
const observer = new IntersectionObserver(observerCb, {
root: null,
threshold: [0],
rootMargin: '30px'
})
function lazyLoad(el, binding) {
// 若图片已经加载了,则return
const src = el.getAttribute('src')
if (src) {
el.setAttribute('lazy-load', 'loaded')
return
}
// binding参数中包含有指令的名称name,值value,参数arg等信息
const { value } = binding
if (!value) return
// 将图片的src绑定到lazy-load-src上,并将状态改为loading
el.setAttribute('lazy-load-src', value)
el.setAttribute('lazy-load', 'loading')
observer.observe(el)
}
function observerCb(entries) {
entries.forEach(item => {
// 如果图片出现在视窗内
if (item.intersectionRatio > 0) {
const el = item.target
const isLoaded = el.getAttribute('lazy-load')
// 若图片已经加载,则取消观测
if (isLoaded === 'loaded') {
observer.unobserve(el)
} else {
// 获取图片的src,并将其赋值到src,启动图片加载
const src = el.getAttribute('lazy-load-src')
el.setAttribute('src', src)
el.setAttribute('lazy-load', 'loaded')
observer.unobserve(el)
}
}
});
}
export default lazyLoad
通过Vue.directive创建lazyload指令
import Vue from 'vue'
import lazyLoad from "./lazyload";
Vue.directive('lazyload', lazyLoad)
体验:https://github.com/377-dsq/ddcom/tree/master/src/directives