Verwenden des Vue-Lazyload-Plug-Ins zum langsamen Laden von Bildern in Vue

Dieser Artikel stellt hauptsächlich eine detaillierte Anleitung zur Verwendung des Vue-Lazyload-Plug-Ins zum langsamen Laden von Bildern vor. Ich hoffe, dass es jedem helfen kann.

Detaillierte Anleitung zum Lazy Loading von Bildern in Vue, zum Teilen mit allen. Die Details lauten wie folgt:

Anleitung

Wenn die Netzwerkanforderung relativ langsam ist, fügen Sie diesem Bild im Voraus ein Platzhalterbild mit einem niedrigeren Pixel hinzu dass sie nicht gestapelt werden oder ein großer Leerraum angezeigt wird, um die Benutzererfahrung zu verbessern.

Fall

Demo: Lazy Loading Case-Demo

Installationsmethode

npm

$ npm i vue-lazyload -D

CDN

CDN: https://unpkg.com/vue-lazyload /vue-lazyload.js

<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
<script>
 Vue.use(VueLazyload)
 ...
</script>

Verwendung

main.js in der Eintragsdatei

import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' //引入这个懒加载插件

Vue.use(VueLazyload)

// 或者添加VueLazyload 选项
Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1
})

new Vue({
 el: 'body',
 components: {
  App
 }
})

Nachdem die Eintragsdatei hinzugefügt wurde, können Sie: src in img direkt an einer beliebigen Stelle in der Komponente verwenden: src -> >

Ändern Sie das :src-Attribut im img-Tag im vorherigen Projekt in v-lazy

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

Parameteroption Beschreibung

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

Sie können die Ereignisse konfigurieren, die Sie mit vue-lazyload verwenden möchten, indem Sie ein Array übergeben

Der Name des Zuhörers.

Dies ist nützlich, wenn Sie Probleme beim Neuladen mit diesem Plugin haben

Vue.use(VueLazyload, {
 preLoad: 1.3,
 error: 'dist/error.png',
 loading: 'dist/loading.gif',
 attempt: 1,
 // the default is ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend']
 listenEvents: [ 'scroll' ]
})

Ausführliche Erklärung von imgLazyLoading.js für das verzögerte Laden von Bildern

Wie man IntersectionObserver verwendet, um das verzögerte Laden von Bildern zu implementieren

Verzögertes Laden von Bildern

Das obige ist der detaillierte Inhalt vonVerwenden des Vue-Lazyload-Plug-Ins zum langsamen Laden von Bildern in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!