Comment utiliser le chargement paresseux dans vue.js

vue.js utilise la méthode de chargement paresseux : installez d'abord lazyload ; puis référencez-le globalement dans [main.js] et configurez enfin l'image qui nécessite un chargement paresseux au fichier vue [v- » bind] :src] a été remplacé par [v-lazy].

L'environnement d'exploitation de ce tutoriel : système windows10, vue2.9, cet article est applicable à toutes les marques d'ordinateurs.

[Articles connexes recommandés : vue.js]

Comment utiliser le chargement différé dans vue.js :

1. Installez lazyload

npm install lazyload -s

2. Référencez-le globalement dans main.js et configurez l'image

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload) //默认配置
// 或者是自己配置预加载图片
Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'dist/error.png',
  loading: 'dist/loading.gif',
  attempt: 1
})

3. Liez l'image qui nécessite un chargement paresseux à v-bind:src dans le fichier. vue file Modifiez-le en v-lazy

<img v-lazy="&#39;@/assets/images/27.png&#39;" class="images-line">

4. Lazyload ne parvient-il pas à référencer les images avec des chemins relatifs ? Le fonctionnement nécessite une image de référence

<img v-lazy="require(&#39;@/assets/images/eight.png&#39;)" class="eight-top">

Recommandations d'apprentissage gratuites associées : JavaScript (vidéo)

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!