Lazy loading of vue3 pictures with the help of plug-in vue3-lazy react Lazy loading of pictures with the help of plug-in react-lazyload

Lazy loading of vue3 images with the help of plug-in vue3-lazy

Vue2 uses vue-lazyload this

1. Install
   npm install vue3-lazy
2. Configure in main.ts

import lazyPlugin from 'vue3-lazy'

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

3. use in the page

<!-- 注意这里面的  v-lazy后面跟一个变量，不能是字符串  通常遍历的时候用，场景中不使用遍历可以用vite中导入图片的方式  import testImg from './../../../assets/images/explain/ncov/zh/1.png'
  去实现  -->
<img v-lazy='item.url'>

Lazy loading of pictures in React with the help of plug-in react-lazyload

1, Download and install the lazy loading module

   cnpm i react-lazyload --save

2, Put the lazy loading placeholder image placeholder.gif in the src/assets/ directory

3, Import the lazy loading module and placeholder image in the component that needs to use lazy loading

    import LazyLoad from 'react-lazyload';
    import placeholder from "../../asset/placeholder.gif"

4, Create a placeholder image tag img in the component rander function

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

5, Add the LazyLoad parent tag to the image that needs to be lazy loaded in the component template

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