vue.js で遅延読み込みを使用する方法

vue.js は遅延読み込みメソッドを使用します。最初に遅延読み込みをインストールします。次に、[main.js] でグローバルに参照し、イメージを構成します。最後に、遅延読み込みが必要なイメージを vue ファイルにバインドします。 [bind] :src] が [v-lazy] に変更されました。

#このチュートリアルの動作環境: Windows10 システム、vue2.9、この記事はすべてのブランドのコンピューターに適用されます。

[関連記事の推奨事項:

vue.js]

vue.js は遅延読み込み方式を使用します: # 1. Lazyload

npm install lazyload -s

2 をインストールします。main.js でグローバルに参照し、イメージ

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) //默认配置
// 或者是自己配置预加载图片
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

3 を設定します。遅延読み込みが必要なイメージを vue ファイルの v-bind:src にバインドします。 v-lazy

<img v-lazy="&#39;@/assets/images/27.png&#39;" class="images-line">

4 に変更します。lazyload は相対パスで画像を参照できませんか?操作には参照画像が必要です

<img v-lazy="require(&#39;@/assets/images/eight.png&#39;)" class="eight-top">

関連する無料学習の推奨事項:

JavaScript

(ビデオ)

以上がvue.js で遅延読み込みを使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。