vue-lazyload - Exemple de tutoriel de chargement différé d'image

Utilisation

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

Options

Description des paramètres

préchargement

　Description :

Exemple :

erreur

Description : Après l'échec du chargement de l'image, l'image par défaut

Exemple : erreur : 'dist/error.png',

chargement

　Description : Pendant le processus de chargement de l'image, les paramètres d'image par défaut affichés

Exemple : chargement : 'dist/loading.gif',

tentative

　Description :

Exemple :

listenEvents

　Description : Événements écoutés, valeur par défaut ['scroll', 'wheel', 'mousewheel', ' resize ', 'animationend', 'transitionend', 'touchmove']

Exemple : ListenEvents : [ 'scroll' ]

adaptateur

Description :

Exemple :

filter

Description : Le chemin pour filtrer l'image, par défaut { }

Exemple :

lazyComponent

Description :

Exemple :

Exemple pratique

 在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">

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!