vue3图片懒加载借助插件vue3-lazy react中的图片懒加载 借助插件 react-lazyload

vue3图片懒加载借助插件vue3-lazy

vue2 就用 vue-lazyload 这个喽

1. 安装
   npm install vue3-lazy
2. 在main.ts中配置

import lazyPlugin from 'vue3-lazy'

app.use(lazyPlugin, {
    
    
    loading: './assets/images/test1.png', // 图片加载时默认图片
    error: './assets/images/test2.png'// 图片加载失败时默认图片
})

3. 在页面中使用

<!-- 注意这里面的  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

    var holderImg = <img src={
    
    placeholder} />

5, 在组件模板中给需要懒加载的图片添加LazyLoad父标签

    <LazyLoad placeholder={holderImg}>
        <img src={item.room_src} alt="这是一个图片" />
    </LazyLoad >