Meilleure pratique pour implémenter le chargement paresseux des images dans Vue

Avec le développement continu de la technologie Internet, la vitesse des pages Web est progressivement devenue un indicateur clé qui affecte l'expérience utilisateur. Afin d’améliorer la vitesse de chargement des pages Web, nous envisageons généralement d’utiliser le chargement paresseux des images. Le chargement paresseux des images signifie le chargement des images lorsque la page défile jusqu'à une certaine position. Cela peut éviter le problème du chargement d'un grand nombre d'images à la fois, ce qui entraîne un chargement trop lent de la page.

Cet article présentera les meilleures pratiques d'utilisation de Vue pour implémenter le chargement paresseux des images.

1. Présentez la bibliothèque tierce vue-lazyload

Le framework Vue lui-même ne fournit pas la fonction de chargement paresseux des images, nous devons donc utiliser une bibliothèque tierce pour y parvenir. Les bibliothèques de chargement paresseux couramment utilisées incluent vue-lazyload, lozad.js, etc. Cet article recommande d'utiliser la bibliothèque vue-lazyload car elle présente les caractéristiques suivantes :

1. Léger : la taille du code de vue-lazyload est très petite, seulement 2 Ko après compression gzip.
2. Adaptatif : vue-lazyload peut charger des images de différentes largeurs en fonction des tailles d'écran de différents appareils, économisant ainsi les ressources réseau.
3. Prise en charge de vue2 et vue3 : vue-lazyload peut prendre en charge les versions 2 et 3 de Vue.

Installez vue-lazyload

Nous pouvons utiliser npm ou Yarn pour installer vue-lazyload:

npm install vue-lazyload

ou

yarn add vue-lazyload

Import vue-lazyload

Dans le fichier d'entrée Vue, importez la bibliothèque vue-lazyload et enregistrez-la globalement ：

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload)

2. Utilisez l'instruction lazyload dans le modèle

Après avoir utilisé la bibliothèque vue-lazyload, il nous suffit d'utiliser l'instruction lazyload dans le modèle pour implémenter le chargement paresseux des images. L'utilisation est la suivante :

<template>
  <img v-lazy="imageURL" alt="图片说明">
</template>

Parmi eux, imageURL représente l'adresse URL de l'image, et alt représente le texte de description de l'image.

Il est à noter que afin d'éviter que l'image ne s'affiche avant son chargement, nous vous recommandons de définir une image d'espace réservé de la même taille que l'image dans la balise img, comme indiqué ci-dessous :

<template>
  <img v-lazy="imageURL" alt="图片说明" src="占位符图片">
</template>

3. Configurez lazyload

Dans le fichier d'entrée de Vue, nous pouvons configurer vue-lazyload globalement, comme indiqué ci-dessous :

import Vue from 'vue'
import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {
  preLoad: 1.3, // 预加载的高度比例，默认为1.3
  error: '错误时显示的图片URL', // 图片加载失败时显示的图片
  loading: '加载中显示的图片URL', // 图片加载时显示的图片
  attempt: 1 // 图片加载失败后重新加载的次数，默认为1
})

Parmi eux, preLoad représente la distance entre le bas de l'écran et l'image au début du chargement. c'est-à-dire qu'il y a encore quelque chose en bas de la page. L'image commence à se charger à une distance 1,3 fois la hauteur actuelle de l'écran. error indique l'adresse de l'image affichée lorsque le chargement de l'image échoue, chargement indique l'adresse de l'image affichée lorsque l'image est chargée, tentative indique le nombre de rechargements après l'échec du chargement de l'image et la valeur par défaut est 1.

4. Conclusion

Cet article présente la meilleure pratique d'utilisation de la bibliothèque vue-lazyload pour implémenter le chargement paresseux des images en configurant lazyload peut améliorer efficacement la vitesse de chargement et l'expérience utilisateur de la page. Enfin, je voudrais rappeler à tous que lorsque vous utilisez le chargement paresseux d'images, vous devez également veiller à contrôler correctement la distance de préchargement et les temps de chargement pour éviter une consommation excessive de ressources réseau et de trafic de téléphonie mobile.

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!