vue实现图片懒加载

1、lazy-img.js

export const lazyLoad = {mounted(el, binding) {const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {// 默认加载网络图片链接el.src = binding.value.srcobserver.unobserve(el) // 停止观察}})}, {threshold: 0.01 // 当图片至少1%可见时触发})observer.observe(el)// 保存observer实例以便后续销毁el._observer = observer},unmounted(el) {if (el._observer) {el._observer.disconnect()delete el._observer}}
}

2、main.js引入

import {lazyLoad} from "@/directives/lazy-img.js";const app = createApp(App)
app.directive("lazy", lazyLoad).mount('#app')

3、组件中使用

// 这是预加载图片
import lazy from '@/assets/lazy.jpg'<img :src="lazy" v-lazy="{src:'真实的图片地址'}">