Vue を使用して画像とプレースホルダー画像の遅延読み込みを実装するにはどうすればよいですか?

Web サイトでは画像の使用が非常に一般的であり、画像の読み込みを最適化する方法が開発者の焦点の 1 つになっています。重要な最適化の 1 つは画像の遅延読み込みです。これは、ユーザーが Web ページをスクロールしたときにのみ表示領域の画像が読み込まれ、スクロールされていない領域には読み込まれないことを意味します。これにより、ページの読み込み圧力が軽減され、ページの読み込み速度が向上します。ユーザー体験。

Vue フレームワークを使用する場合、Vue フレームワークが提供する命令を使用して、画像とプレースホルダー画像の遅延読み込みを簡単に実装できます。

1. 画像の遅延読み込みの実装には、Vue-lazyload ライブラリを使用できます。まず、npm を使用してライブラリをインストールする必要があります:

npm i vue-lazyload -S

2. ライブラリを Vue のエントリ ファイル main.js に導入し、設定します:

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

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的宽高比，默认为 1，即 PhotoShop 中的 1:1
  error: 'path/to/error.png', // 当加载图片失败时的占位图
  loading: 'path/to/loading.gif', // 加载中时的占位图
  attempt: 1 // 图片加载的尝试次数
})

where 、preLoad は、プリロードのアスペクト比を指定します。たとえば、1.3 に設定すると、画像がプリロードされるとき、幅はターゲット幅の 1.3 倍になります。エラーとロードは、それぞれ、ロードが失敗したときとロードしたときの画像プレースホルダ画像です。 ; 試行回数は、イメージのロードを試行する回数です。

3. 遅延ロードする必要があるイメージの位置で、src 属性を v-lazy に置き換えます。 コマンド:

<img v-lazy="path/to/image.png">

4. 遅延読み込みを有効にする必要があるページ内の領域を指定します:

<template>
  <div class="container">
    <div class="item" v-for="item in list">
      <img v-lazy="item.src"> <!-- 图片使用懒加载 -->
      <p>{{ item.text }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          src: 'path/to/image-1.png',
          text: '图片 1'
        },
        {
          src: 'path/to/image-2.png',
          text: '图片 2'
        },
        {
          src: 'path/to/image-3.png',
          text: '图片 3'
        }
      ]
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 启用懒加载
      this.$lazyload(this.$refs.container)
    })
  }
}
</script>

上記のコードは、ページ上のループで画像のリストを表示します。各画像は遅延読み込みを使用します。 mounted フック関数では、遅延読み込みを有効にする領域を container モジュールとして指定することで、画像の遅延読み込みを実現します。

5. プレースホルダー画像の作成については、オンライン ツールや PhotoShop などのツールを使用して、Web サイトのスタイルに合わせたプレースホルダー画像を作成できます。

上記の手順により、Vue での画像とプレースホルダー画像の遅延読み込みの効果を簡単に実現できます。これにより、Web サイトの読み込み圧力が大幅に軽減され、ユーザー エクスペリエンスが向上します。

以上がVue を使用して画像とプレースホルダー画像の遅延読み込みを実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。