vue3 图片懒加载

最新推荐文章于 2025-05-25 22:12:59 发布

原创最新推荐文章于 2025-05-25 22:12:59 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #javascript #前端

收录于

本文介绍了如何在 Vue3 中实现图片的懒加载，包括基本的代码实现和将其封装为自定义指令的方法，帮助提升前端性能。

vue3 图片懒加载

基本代码
封装为自定义指令

基本代码

<template>
   <div>
    <div style="height:2000px"></div>
    <img ref="target" src="" alt="">
   </div>
</template>
 
<script lang='ts' setup>
import { ref,reactive } from 'vue'
import {useIntersectionObserver} from '@vueuse/core'
const target = ref<HTMLImageElement|null>(null)

useIntersectionObserver(target, ([{isIntersecting}]) =>{
const src = 'https://ts3.cn.mm.bing.net/th?id=OIP-C.Zxtf2X2EddV-g7hKyBhilAHaQB&w=161&h=350&c=8&rs=1&qlt=90&o=6&pid=3.1&rm=2'
if(isIntersecting){
    if(target.value){
        target.value.src = src 
    }
}
})
</script>
 
<style scoped>

</style>

封装为自定义指令

export default function (app: App<Element>) {

  app.directive('lazy', {
    mounted(el, binding) {
      const { stop } = useIntersectionObserver(el,([{ isIntersecting }]) => {
        if(isIntersecting){
          el.src = binding.value
          el.onerror = function() {
            el.src = defaultImg//默认图片
          }  
        }
        stop()
      })
    },
  })
}