vue3图片懒加载借助插件vue3-lazy
vue2 就用 vue-lazyload 这个喽
- 安装
npm install vue3-lazy - 在main.ts中配置
import lazyPlugin from 'vue3-lazy'
app.use(lazyPlugin, {
loading: './assets/images/test1.png', // 图片加载时默认图片
error: './assets/images/test2.png'// 图片加载失败时默认图片
})
- 在页面中使用
<!-- 注意这里面的 v-lazy后面跟一个变量，不能是字符串 通常遍历的时候用，场景中不使用遍历可以用vite中导入图片的方式 import testImg from './../../../assets/images/explain/ncov/zh/1.png'
去实现 -->
<img v-lazy='item.url'>
React中的图片懒加载 借助插件 react-lazyload
1, 下载安装懒加载模块
cnpm i react-lazyload --save
2, 在src/assets/目录下放入懒加载占位图 placeholder.gif
3, 在需要使用懒加载的组件中导入懒加载模块和占位图
import LazyLoad from 'react-lazyload';
import placeholder from "../../asset/placeholder.gif"
4, 在组件rander函数中创建占位图片标签img文章来源：https://www.toymoban.com/news/detail-514852.html
var holderImg = <img src={placeholder} />
5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签文章来源地址https://www.toymoban.com/news/detail-514852.html
<LazyLoad placeholder={holderImg}>
<img src={item.room_src} alt="这是一个图片" />
</LazyLoad >
到了这里，关于vue3图片懒加载借助插件vue3-lazy react中的图片懒加载 借助插件 react-lazyload的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
