vue-lazyload – Beispiel-Tutorial zum verzögerten Laden von Bildern

Verwendung

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
　　preLoad: 1.3,
　　error: 'dist/error.png',
　　loading: 'dist/loading.gif',
　　attempt: 1
})

Optionen

Parameterbeschreibung

preLoad

Beschreibung:

Beispiel:

Fehler

Beschreibung: Nachdem das Laden des Bildes fehlgeschlagen ist, wird das Standardbild

Beispiel: Fehler: 'dist/error.png',

Laden

　Beschreibung: Während des Bildladevorgangs werden die Standardbildeinstellungen angezeigt

Beispiel: Laden: 'dist/loading.gif',

Versuch

　Beschreibung:

Beispiel:

listenEvents

　 Beschreibung: Abgehörte Ereignisse, Standardwert ['scroll', 'wheel', 'mousewheel', ' resize ', 'animationend', 'transitionend', 'touchmove']

Beispiel: listenEvents: [ 'scroll' ]

adapter

Beschreibung:

Beispiel:

filter

Beschreibung: Der Pfad zum Filtern des Bildes, Standard { }

Beispiel:

lazyComponent

Beschreibung :

Beispiel:

Praxisbeispiel

 在main.js文件添加：
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload, {
　　// 设置默认显示的图片
　　loading: require('common/image/default.png')
})
在需要用到延迟加载页面
<img width="60" height="60" v-lazy="item.imgurl">

Das obige ist der detaillierte Inhalt vonvue-lazyload – Beispiel-Tutorial zum verzögerten Laden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!