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>

Ereignisse, die Sie abhören möchten

key	description	default	options
preLoad	proportion of pre-loading height	1.3	Number
error	当加载图片失败的时候	'src'	String
loading	当加载图片成功的时候	'src'	String
attempt	尝试计数	3	Number
listenEvents	想要监听的事件	['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	动态修改元素属性	{ }	Element Adapter
filter	图片监听或过滤器	{ }	Image listener filter
lazyComponent	lazyload component	false	Lazy Component
dispatchEvent	触发dom事件	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver

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' ]
})

Verwandte Empfehlungen:

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!