1. Installieren Sie das Vue-Lazyload-Plugin
npm install vue-lazyload --save-dev
2. Referenz in main.js
import VueLazyload from "vue-lazyload";
Vue.use(VueLazyload);
//或者自定义配置插件
Vue.use(VueLazyload, {
preLoad: 1.3,
error: require('../src/assets/image/error.png'),
loading: require('../src/assets/image/loading.gif'),
attempt: 1
})
Hinweis: Hier gibt es eine Gefahr. Wenn das Bild unter der Assets-Datei
platziert wird , sollte zum Importieren die oben beschriebene Schreibmethode „require('relative path‘)“ verwendet werden. Wenn das Bild unter der statischen Datei platziert wird , können Sie den Pfad zum Importieren direkt schreiben, wie unten gezeigt.
Importmethode für statische Dateibilder:
Vue.use(VueLazyload, {
preLoad: 1.3,
error: '../src/assets/image/error.png',
loading: '../src/assets/image/loading.gif',
attempt: 1
})
Die Bedeutung jeder benutzerdefinierten Konfigurationseigenschaft:
| Taste | Beschreibung | Standard | Optionen |
|---|---|---|---|
| Vorladen | Höhenverhältnis der Vorspannung | 1.3 | Nummer |
| Fehler | Quelle des Bildes bei Ladefehler (geben Sie das Bild bei Ladefehler an) | 'data-src' | Zeichenfolge |
| Wird geladen | Quelle des Bildes beim Laden (Ladebild angeben) | 'data-src' | Zeichenfolge |
| versuchen | Versuchen Sie es mit Zählen | 3 | Nummer |
| listenEvents | das Ereignis, das Sie hören möchten | ['scroll', 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove'] | Gewünschte Listen-Ereignisse |
| Adapter | Elementattribute dynamisch ändern | { } | Elementadapter |
| Filter | Bildüberwachung oder Filter | { } | Bild-Listener-Filter |
| lazyComponent | Lazyload-Komponente | FALSCH | Faule Komponente |
| Versandereignis | Dom-Ereignis auslösen | FALSCH | Boolescher Wert |
| GashebelWarten | Gas geben, warten | 200 | Nummer |
| Beobachter | Verwenden Sie IntersectionObserver | FALSCH | Boolescher Wert |
| Beobachteroptionen | IntersectionObserver-Optionen | { rootMargin: '0px', Schwellenwert: 0,1 } | IntersectionObserver |
| still | Drucken Sie keine Debug-Informationen aus | WAHR | Boolescher Wert |
3. Verwenden (Bild als Lazy Loading festlegen)
<img v-lazy="psdimg" class="psd" />
Hinweis:
Wenn Sie auf eine V-for-Schleife stoßen oder ein IMG mit einem Div umschließen, müssen Sie v-lazy-container="{ selector: 'img' }" über dem Div hinzufügen
<div v-lazy-container="{ selector: 'img' }">
<img data-src="//aaa.com/img1.jpg">
<img data-src="//aaa.com/img2.jpg">
<img data-src="//aaa.com/img3.jpg">
</div>
<!--或者这种：-->
<div v-lazy-container="{ selector: 'img' }" v-html="content">
</div>
Wenn dies der Fall ist, verwenden Sie unbedingt data-src anstelle von v-lazy, um den Pfad anzugeben. Denn wenn Sie v-lazy verwenden, können Sie die Bildadresse nach dem Abrufen nicht mehr anzeigen.