vue3-lazy プラグインを使用した vue3 画像の遅延読み込み プラグイン act-lazyload を使用した画像の遅延読み込み

プラグイン vue3-lazy を使用した vue3 イメージの遅延読み込み

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-lazyloadを使用したReactでの画像の遅延読み込み

1、遅延読み込みモジュールをダウンロードしてインストールします

   cnpm i react-lazyload --save

2、遅延読み込みプレースホルダー画像 placeholder.gif を src/assets/ ディレクトリに配置します。

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 >