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中導(dǎo)入圖片的方式 import testImg from './../../../assets/images/explain/ncov/zh/1.png'
去實現(xiàn) -->
<img v-lazy='item.url'>
React中的圖片懶加載 借助插件 react-lazyload
1, 下載安裝懶加載模塊
cnpm i react-lazyload --save
2, 在src/assets/目錄下放入懶加載占位圖 placeholder.gif
3, 在需要使用懶加載的組件中導(dǎo)入懶加載模塊和占位圖
import LazyLoad from 'react-lazyload';
import placeholder from "../../asset/placeholder.gif"
4, 在組件rander函數(shù)中創(chuàng)建占位圖片標(biāo)簽img文章來源：http://www.zghlxwxcb.cn/news/detail-514852.html
var holderImg = <img src={placeholder} />
5, 在組件模板中給需要懶加載的圖片添加LazyLoad父標(biāo)簽文章來源地址http://www.zghlxwxcb.cn/news/detail-514852.html
<LazyLoad placeholder={holderImg}>
<img src={item.room_src} alt="這是一個圖片" />
</LazyLoad >
到了這里，關(guān)于vue3圖片懶加載借助插件vue3-lazy react中的圖片懶加載 借助插件 react-lazyload的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
