Tutoriel de base VUE3 : Utiliser le plug-in Vue.js pour gérer le chargement des images

Vue.js est actuellement l'un des frameworks front-end les plus populaires. Il fournit non seulement une riche bibliothèque de modèles et de composants, mais prend également en charge de nombreux plug-ins puissants, y compris des plug-ins de chargement d'images. L'utilisation du plug-in Vue.js pour gérer le chargement des images peut nous aider à optimiser plus facilement les performances du site Web et à augmenter la vitesse de chargement des pages.

Dans ce tutoriel, nous présenterons comment utiliser le plugin Vue.js pour gérer le chargement des images. Tout d’abord, nous devons installer une bibliothèque appelée plugin Vue.js. Elle peut être installée dans le terminal avec la commande suivante :

npm install vue-lazyload --save

Une fois l'installation terminée, nous devons introduire cette bibliothèque dans le fichier principal de Vue.js (généralement main.js). Avant que Vue.js ne crée une instance, ajoutez le code suivant :

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

Ici, nous introduisons la bibliothèque vue-lazyload et utilisons la méthode Vue.use() pour l'installer dans Vue.js. De cette façon, le plug-in vue-lazyload peut être utilisé dans Vue.js.

Ensuite, nous devons utiliser le plugin vue-lazyload dans le modèle. Cela peut être accompli en suivant les étapes suivantes :

1. Modifiez la balise img d'origine en composant intégré v-lazy de Vue.js. Par exemple :

<img v-lazy="imageUrl" />

La variable imageUrl contient ici l'URL de l'image. Notez que le composant v-lazy dans Vue.js décidera automatiquement quand charger l'image en fonction de l'état de l'instance Vue.js.

2. Si vous souhaitez définir un espace réservé par défaut pour l'image, vous pouvez définir la valeur de v-lazy sur l'URL de l'espace réservé. Par exemple :

<img v-lazy="imageUrl" v-lazy-placeholder="placeholderImageUrl" />

La variable placeholderImageUrl contient ici l'URL de l'image d'espace réservé. Lorsque l'image n'a pas été chargée, la page affichera l'image d'espace réservé jusqu'à ce que l'image réelle soit chargée.

3. Modifiez la configuration du plug-in vue-lazyload et ajustez la méthode de chargement des images en fonction de vos besoins. Vous pouvez ajouter le code suivant au fichier principal de Vue.js :

Vue.use(VueLazyload, {
  preLoad: 1.3,
  error: 'error.jpg',
  loading: 'loading.gif',
  attempt: 1
})

Dans cet exemple, nous pouvons voir que le plug-in Vue.js vue-lazyload prend en charge les quatre suivants options de configuration : # 🎜🎜#

preLoad : le rapport de hauteur à précharger avant le chargement de l'image réelle, par défaut à 1,3 (c'est-à-dire que 1,3 fois la hauteur de l'image est préchargée avant qu'elle n'entre dans la fenêtre d'affichage ).
• error : L'URL de l'image d'erreur affichée lors du chargement de l'image échoue.
• loading : L'URL de l'image d'espace réservé affichée pendant le processus de chargement.
• attempt : Le nombre de tentatives de chargement de l'image. La valeur par défaut est 1, ce qui signifie que le chargement sera tenté au maximum une fois.

Les quatre options ci-dessus sont facultatives et peuvent être ajustées en fonction des besoins spécifiques.

Maintenant, nous avons géré avec succès le chargement des images à l'aide du plugin Vue.js vue-lazyload. En utilisant des plugins, nous pouvons facilement optimiser les performances de notre site Web et augmenter la vitesse de chargement des pages.

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!