ホームページ > ウェブフロントエンド > Vue.js > Vue で画像の遅延読み込みとプレースホルダーを処理する方法

Vue で画像の遅延読み込みとプレースホルダーを処理する方法

王林
リリース: 2023-10-15 17:12:19
オリジナル
941 人が閲覧しました

Vue で画像の遅延読み込みとプレースホルダーを処理する方法

Vue での画像の遅延読み込みとスペース占有に対処する方法

遅延読み込み (Lazy Loading) は、Web での画像の読み込みを遅延させるパフォーマンス最適化テクノロジです。ページ 。ユーザーが画像の場所までスクロールしたときにのみ読み込まれ、初期読み込み時間とネットワーク帯域幅の使用量が削減されます。同時に、プレースホルダー技術を使用すると、ページ レイアウトの安定性を維持し、画像の読み込みが遅いことによって引き起こされるページ レイアウトの乱れの問題を回避できます。この記事では、Vue で画像の遅延読み込みとプレースホルダー関数を実装する方法と、具体的なコード例を紹介します。

1. プラグインのインストール

まず、画像の遅延読み込み機能を実装するために Vue プラグインをインストールする必要があります。使いやすく互換性の高い vue-lazyload プラグインの使用を推奨します。次のコマンドでインストールします:

1

npm install vue-lazyload --save

ログイン後にコピー

2. プラグインの設定

Vue エントリ ファイル (通常は main.js) で、vue-lazyload プラグインを導入して設定する必要があります。で。実際のニーズに応じて具体的な構成を調整できます。一般的に使用される構成例は次のとおりです:

1

2

3

4

5

6

7

8

9

import Vue from 'vue'

import VueLazyload from 'vue-lazyload'

 

Vue.use(VueLazyload, {

  preLoad: 1.3, // 预加载高度的比例

  error: 'error.jpg', // 图片加载失败时显示的占位图片

  loading: 'loading.gif', // 图片加载过程中显示的占位图片

  attempt: 3 // 加载失败后的重试次数

})

ログイン後にコピー

上記の構成では、画像の読み込みに失敗したときに表示されるプレースホルダー画像を error.jpg に設定しています。画像読み込みプロセス 表示されるプレースホルダー画像はloading.gifで、読み込み失敗後、画像は最大3回再読み込みされます。

3. アプリケーション プラグイン

画像が特に使用される場合、v-lazy コマンドを使用して画像を遅延ロードでき、v-loading コマンドを使用してオーバーヘッドを追加できます。画像読み込みプロセスのビット効果。以下は、vue-lazyload プラグインを使用して画像の遅延読み込みとプレースホルダーを実装する例です。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<template>

  <div>

    <img  v-lazy="imageSrc" v-loading="isLoading" / alt="Vue で画像の遅延読み込みとプレースホルダーを処理する方法" >

  </div>

</template>

 

<script>

export default {

  data() {

    return {

      imageSrc: '', // 实际图片的地址

      isLoading: true // 控制加载过程中的占位效果

    }

  },

  mounted() {

    // 模拟获取实际图片地址的过程

    setTimeout(() => {

      this.imageSrc = 'realImage.jpg'

      this.isLoading = false

    }, 1000)

  }

}

</script>

ログイン後にコピー

上記のコードでは、v を通じて画像の実際のアドレスを imageSrc 属性にバインドします。 -lazy 命令、およびパス v -loading ディレクティブは、ロード プロセス中のプレースホルダー効果を isLoading 属性にバインドします。実装されたライフサイクルフックでは、画像の実際のアドレスを取得するプロセスをシミュレートし、1秒後に実際のアドレスをimageSrcに割り当て、isLoadingをfalseに設定して画像を表示しました。

上記の構成とサンプル コードにより、Vue で画像の遅延読み込みとプレースホルダー関数を実装できます。これにより、Web ページの読み込み速度とユーザー エクスペリエンスが向上し、画像の読み込みの遅さによって引き起こされるページ レイアウトの問題を回避できます。同時に、vue-lazyload プラグインの柔軟な構成を通じて、より良い最適化結果を達成するために、必要に応じて遅延読み込みとプレースホルダーの効果を調整できます。

以上がVue で画像の遅延読み込みとプレースホルダーを処理する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート