【vue】vue-image-lazy图片懒加载使用与介绍【超详细+npm包源代码】

沉默小管2023-08-05 10:08

简介

当前插件是基于vue3，写的一个图片懒加载，文章最下方是npm包的源码，你可以自己拿去研究和修改，如有更好的想法可以留言，如果对你有帮助，可以点赞收藏和关注，谢谢。

后续会添加图片放大和切换图片等功能

配置

使用imageLazy组件的配置

字段 类型 默认值 描述
src String "" 图片源地址，同原生属性一致
imgList String\[\] \[\] 开启图片预览功能
loadingColor String "#2dbff1" 加载图标主题颜色
errorColor String "888888" 加载图标主题颜色
imgStyle String "" 图片样式
key String-Number 0 图片索引

安装

bash 复制代码 
npm i vue-image-lazy-xg --save

使用

main.ts

复制代码 
// script
import { createApp } from 'vue';
import App from './App.vue';
import imageLazy from "vue-image-lazy-xg"
import "vue-image-lazy-xg/lib/style.css"

const app = createApp(App);
app.use(imageLazy); //全局注册
//配置可有可有无
//app.use(imageLazyLoading,{
//    loadingGif:"加载的图片",
//    errorImg:"错误的图片",
//})
app.mount('#app');

App.vue

第一个写法直接用自定义命令

复制代码 
<template>
  <div class="app-container">
     <img
        class="img"
        v-for="item in result"
        :key="item.picture"
        v-img-lazy="item.picture"
    />
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const result = [
  { picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  { picture:
        '1111111111111',
    picList:[]
  },
  { picture:
        '2222222222222222',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  { picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  {
    picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  {
    picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  }]
</script>

第二个写法用组件

复制代码 
<template>
  <div class="app-container">
  <!--默认使用方法-->
   <imageLazy
      v-for="(item,key) in result"
      class="img"
      :key="key"
      :src="item.picture"
      :imgList="item?.picList"
       />
       
   <!--自定义错误图标-->
   <imageLazy
                v-for="(item,key) in result"
                class="img"
                :key="key"
                :src="item.picture"
                :lazy="true"
        >
      <template #error>
        <i :style="'font-size:58px;color:red'" class="icon iconfont icon-tupianjiazaishibai"></i>
      </template>
   </imageLazy>
  </div>
</template>

<script setup lang="ts">
import {ref} from "vue";

const result = [
  { picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  { picture:
        '1111111111111',
    picList:[]
  },
  { picture:
        '2222222222222222',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
      "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  { picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  {
    picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  },
  {
    picture:
        'https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1enjLx.img?w=1920&h=1080&q=60&m=2&f=jpg',
    picList:["https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
    "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
    "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
    ]
  }]
</script>

最终效果


特别注意

如果你制作自己的插件时，用图标时，font-family字体，千万别用默认字体，改为你自己自定义的图标。如果你不改，别人在使用你的插件时，可能其他插件字体或本地字体覆盖你的插件，时用户体验感降低

自定义字体步骤如下:

  1. iconfont.css文件

    修改为

  2. 项目中使用

bash 复制代码 
<i class="icon iconfont icon-tupianjiazaishibai"></i>
改为
<i class="icon image-lazy-iconfont icon-tupianjiazaishibai"></i>

源码

插件项目源码

✨ 踩坑不易，还希望各位大佬支持一下 \textcolor{gray}{踩坑不易，还希望各位大佬支持一下} 踩坑不易，还希望各位大佬支持一下

📃 个人主页： \textcolor{green}{个人主页：} 个人主页： 沉默小管

📃 个人网站： \textcolor{green}{个人网站：} 个人网站： 沉默小管

📃 个人导航网站： \textcolor{green}{个人导航网站：} 个人导航网站： 沉默小管导航网

📃 我的开源项目： \textcolor{green}{我的开源项目：} 我的开源项目： vueCms.cn

🔥 技术交流 Q Q 群： 837051545 \textcolor{green}{技术交流QQ群：837051545} 技术交流QQ群：837051545

👍 点赞，你的认可是我创作的动力！ \textcolor{green}{点赞，你的认可是我创作的动力！} 点赞，你的认可是我创作的动力！

⭐️ 收藏，你的青睐是我努力的方向！ \textcolor{green}{收藏，你的青睐是我努力的方向！} 收藏，你的青睐是我努力的方向！

✏️ 评论，你的意见是我进步的财富！ \textcolor{green}{评论，你的意见是我进步的财富！} 评论，你的意见是我进步的财富！

如果有不懂可以留言，我看到了应该会回复

如有错误，请多多指教

相关推荐
夏幻灵5 小时前
JavaScript this 面试：五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
三天不学习6 小时前
Egg.js 4 突然爆火，原因是否归结于AI 原生落地需求爆发？
前端·javascript·全栈·egg.js
xcs194057 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
雪芽蓝域zzs10 小时前
第 5 节：Marker 点击弹出 InfoWindow 信息窗口
vue.js
guslegend12 小时前
脚手架原理与本地调试：从 bin 软链接到 npm link
前端·npm·node.js·脚手架·前端工程化
小宋102112 小时前
A2UI从零实战：Agent安全生成交互界面与事件回传
javascript·人工智能·安全·交互
大包子12 小时前
structuredClone vs lodash.cloneDeep：核心差异与选型指南
javascript·vue.js
lerhxx13 小时前
AI 应用中的上下文管理 —— 从"上下文窗口"到"分层压缩"的工程实践
前端·javascript
雪芽蓝域zzs13 小时前
第 3 节：地图点击事件，点击获取经纬度
vue.js
Mahut13 小时前
我在 Mac 上做了个本地剪辑器
javascript·架构·产品
热门推荐
01如何新建文件夹？ 电脑新建文件夹的4种方法02国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）03历年考研数学一、数学二、数学三真题试卷及答案PDF04GitHub 镜像站点05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06轻量化AI渗透武器库｜ARTEX自主攻防系统、资产梳理、漏洞挖掘、链路分析全流程智能化落地07Windows 10/11 如何退出微软账户并改用本地账户登录（含找不到选项的解决方法）08Telegram APK 下载安装完整指南 — 2026年最新09微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新10几个好用的ip纯净度检测网站