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 v-lazy="imageURL" alt="图片说明">
</template>

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

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

<template>
  <img v-lazy="imageURL" alt="图片说明" src="占位符图片">
</template>

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

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

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