So verwenden Sie Lazy Loading in vue.js

vue.js verwendet die Lazy-Loading-Methode: Installieren Sie zuerst Lazyload, referenzieren Sie es dann global in [main.js] und konfigurieren Sie schließlich die Bildbindung [v-bind:src], die Lazy Loading im Vue benötigt Datei Es ist „v-faul“.

Die Betriebsumgebung dieses Tutorials: Windows10-System, vue2.9, dieser Artikel gilt für alle Computermarken.

【Empfohlene verwandte Artikel: vue.js】

vue.js verwendet die Lazy-Loading-Methode:

1. Installieren Sie lazyload

npm install lazyload -s

2. Referenzieren Sie global in main.js und konfigurieren Sie Bilder

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 . Ändern Sie in der Vue-Datei v-bind:src für Bilder, die träge geladen werden müssen, in v-lazy

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

4. Kann Lazyload Bilder nicht mit relativen Pfaden referenzieren? Für den Betrieb sind Referenzbilder erforderlich

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

Verwandte kostenlose Lernempfehlungen: JavaScript (Video)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Lazy Loading in vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!