Maison > interface Web > tutoriel HTML > vue-lazyload - Exemple de tutoriel de chargement différé d'image

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

零下一度
Libérer: 2018-05-26 16:34:18
original
2761 Les gens l'ont consulté

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
})
Copier après la connexion

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">
Copier après la connexion


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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal