Vue で画像の遅延読み込みを実装するためのベスト プラクティス

インターネット技術の継続的な発展に伴い、Web ページの速度は徐々にユーザー エクスペリエンスに影響を与える重要な指標になってきました。 Web ページの読み込み速度を向上させるために、通常、画像の遅延読み込みの使用を検討します。画像の遅延読み込みとは、ページが特定の位置までスクロールしたときに画像を読み込むことを意味します。これにより、一度に大量の画像を読み込んでページの読み込みが遅くなりすぎるという問題を回避できます。

この記事では、Vue を使用して画像の遅延読み込みのベスト プラクティスを実装する方法を紹介します。

1. サードパーティ ライブラリ vue-lazyload の導入

Vue フレームワーク自体は画像の遅延読み込み機能を提供していないため、これを実現するにはサードパーティ ライブラリを使用する必要があります。それ。一般的に使用される遅延読み込みライブラリには、vue-lazyload、lozad.js などが含まれます。この記事では、次の特徴があるため、vue-lazyload ライブラリの使用をお勧めします。

1. 軽量: vue-lazyload のコード サイズは非常に小さく、gzip 圧縮後のサイズはわずか 2 KB です。
2. 適応性: vue-lazyload は、さまざまなデバイスの画面サイズに応じてさまざまな幅の画像をロードできるため、ネットワーク リソースを節約できます。
3. vue2 と vue3 のサポート: vue-lazyload は、Vue バージョン 2 と 3 の両方をサポートできます。

vue-lazyload のインストール

npm または Yarn を使用して vue-lazyload をインストールできます:

npm install vue-lazyload

or

yarn add vue-lazyload

vue-lazyload をインポートします

Vue のエントリ ファイルで、vue-lazyload ライブラリをインポートし、グローバルに登録します。

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

2. テンプレートで Lazyload 命令を使用します。

vue を使用した後-lazyload library を使用する場合、テンプレートで Lazyload 命令を使用して画像の遅延ロードを実装するだけです。使い方は以下の通りです。

<template>
  <img src="/static/imghwm/default1.png"  data-src="占位符图片"  class="lazy"  v-lazy="imageURL" alt="图片说明">
</template>

このうち、imageURL は画像の URL アドレスを表し、alt は画像の説明文を表します。

画像が読み込まれる前に表示されないようにするには、以下に示すように、img タグ内の画像と同じサイズのプレースホルダー画像を設定することをお勧めします。

<template>
  <img src="/static/imghwm/default1.png"  data-src="占位符图片"  class="lazy"  v-lazy="imageURL" alt="图片说明">
</template>

3. Lazyload の設定

Vue のエントリ ファイルでは、以下に示すように vue-lazyload をグローバルに設定できます:

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例，默认为1.3
  error: '错误时显示的图片URL', // 图片加载失败时显示的图片
  loading: '加载中显示的图片URL', // 图片加载时显示的图片
  attempt: 1 // 图片加载失败后重新加载的次数，默认为1
})

このうち、preLoad は画像間の距離を表します。読み込みを開始する距離、デフォルトは 1.3、つまり、画像はページの下部から現在の画面の高さの 1.3 倍の距離で読み込みを開始します。 error はイメージのロードに失敗したときに表示されるイメージ アドレスを示し、loading はイメージのロード時に表示されるイメージ アドレスを示し、attempt はイメージのロードに失敗した後のリロードの回数を示します。デフォルトは 1 です。

4. 結論

この記事では、vue-lazyload ライブラリを使用して画像の遅延読み込みを実装するベスト プラクティスを紹介します。lazyload を構成して画像の遅延読み込みを実装すると、読み込み速度が効果的に向上し、ページのユーザーエクスペリエンス。最後に、画像の遅延読み込みを使用する場合は、ネットワーク リソースと携帯電話のトラフィックの過度の消費を避けるために、プリロード距離と読み込み時間の適切な制御にも注意を払う必要があることを皆さんに思い出していただきたいと思います。

以上がVue で画像の遅延読み込みを実装するためのベスト プラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。