Utiliser le plug-in vue-lazyload pour charger paresseusement des images dans vue

Cet article présente principalement un guide détaillé sur l'utilisation du plug-in vue-lazyload pour charger paresseusement des images dans vue. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Guide détaillé sur l'utilisation du chargement paresseux des images dans vue, à partager avec tout le monde. Les détails sont les suivants :

Instructions

Lorsque la requête réseau est lente, ajoutez à l'avance une image d'espace réservé avec un pixel inférieur à cette image afin que il ne les empilera pas ensemble et n'affichera pas un grand espace vide pour améliorer l'expérience utilisateur.

Case

Démo : Démo du cas de chargement paresseux

Méthode d'installation

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>

Utilisation

main.js dans le fichier d'entrée

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

Une fois le fichier d'entrée ajouté, vous pouvez directement utiliser : src in img n'importe où dans le composant : src -> >

Changez l'attribut :src dans la balise img du projet précédent en v-lazy

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img :src="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

option de paramètre Description

 <p class="pic">
  <a href="#" rel="external nofollow" rel="external nofollow" ><img v-lazy="&#39;/static/img/&#39; + item.productImage" alt=""></a>
</p>

Événements que vous souhaitez écouter

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

Vous pouvez configurer les événements que vous souhaitez utiliser vue-lazyload en passant un tableau

Le nom de l'auditeur.

Ceci est utile si vous rencontrez des difficultés pour recharger avec ce plugin

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

Recommandations associées :

Chargement paresseux de l'image imgLazyLoading.js explication détaillée

Comment utiliser IntersectionObserver pour implémenter le chargement paresseux de l'image

Chargement paresseux de l'image

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!