Vue3中使用原生的js监听图片懒加载

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

是要开心的婷婷呀~

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

阅读量612

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端 Vue3 文章标签： vue.js html5 html

本文链接：https://blog.csdn.net/weixin_48837605/article/details/120326494

本文介绍了如何在Vue中使用IntersectionObserver API和vueuse库创建一个自定义指令`v-lazyload`，实现在图片进入可视区域时加载图片，并在加载失败时显示默认图片的功能。详细讲解了指令的mounted阶段、监听图片进入可视区域、修改图片src属性以及自定义指令的规则。同时，展示了组件库插件的安装和使用，以及如何在模板中应用该自定义指令。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的:当图片进入可视区域的时候去加载图片,且数据要是加载失败,会显示默认的图片

需解决的问题:

1.如果监听图片进入可视区域

2.直接操作图片,给他的src属性赋值

3.自定义指令的规则

自定义指令实现如下的

src\components\library\index.js

注意:使用webapi:IntersectionObserve ,vueuse中的useIntersectionObserve的底层就是由这个webAPI而来的

其中有两个方法 observe.observe(imgDom) //检测哪个dom元素

observe.unobserve(imgDom) //停止检测哪个dom元素

// ui组件库插件
// vue插件的本质是对象(对象中必须提供install方法)
import XtxSkeleton from './xtx-skeleton.vue'
import XtxCarousel from './xtx-carousel.vue'
import XtxMore from './xtx-more.vue'
import defaultImg from '@/assets/200.png'
export default {
  // vue2中install中的参数是Vue是vue构造函数,vue3中是app是根组件的实例对象
  install(app) {
    // 配置一个全局组件
    app.component(XtxSkeleton.name, XtxSkeleton)
    app.component(XtxCarousel.name, XtxCarousel)
    app.component(XtxMore.name, XtxMor