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>

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

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!