Maison > Article > interface Web > Comment utiliser Vue pour implémenter le chargement paresseux d'images et d'images d'espace réservé ?
Dans les sites Web, l'utilisation d'images est très courante et la manière d'optimiser le chargement des images est devenue l'une des priorités des développeurs. L'une des optimisations importantes est le chargement paresseux des images, ce qui signifie que les images dans la zone visible ne sont chargées que lorsque l'utilisateur fait défiler la page Web et ne sont pas chargées dans la zone non défilée, réduisant ainsi la pression de chargement de la page et améliorant l'apparence. expérience utilisateur.
Lorsque vous utilisez le framework Vue, vous pouvez facilement implémenter le chargement paresseux d'images et d'images d'espace réservé en utilisant les instructions qu'il fournit.
npm i vue-lazyload -S
import Vue from 'vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, // 预加载的宽高比,默认为 1,即 PhotoShop 中的 1:1 error: 'path/to/error.png', // 当加载图片失败时的占位图 loading: 'path/to/loading.gif', // 加载中时的占位图 attempt: 1 // 图片加载的尝试次数 })
Parmi eux, preLoad spécifie le rapport hauteur/largeur préchargé, par exemple, si vous définissez à 1,3, puis lorsque l'image est préchargée, la largeur sera 1,3 fois la largeur cible ; l'erreur et le chargement sont respectivement les images d'espace réservé à l'image lorsque le chargement échoue et la tentative de chargement est le nombre de tentatives de chargement de l'image.
src
par la commande v-lazy
: src
属性替换为 v-lazy
指令:<img v-lazy="path/to/image.png">
<template> <div class="container"> <div class="item" v-for="item in list"> <img v-lazy="item.src"> <!-- 图片使用懒加载 --> <p>{{ item.text }}</p> </div> </div> </template> <script> export default { data() { return { list: [ { src: 'path/to/image-1.png', text: '图片 1' }, { src: 'path/to/image-2.png', text: '图片 2' }, { src: 'path/to/image-3.png', text: '图片 3' } ] } }, mounted() { this.$nextTick(() => { // 启用懒加载 this.$lazyload(this.$refs.container) }) } } </script>
上述代码在页面中循环展示一个图片列表,每个图片都使用了懒加载,同时在 mounted
钩子函数中指定启用懒加载的区域为 container
montée
. La zone est le module conteneur
, afin que le chargement paresseux des images puisse être réalisé. 🎜 Concernant la production d'images fictives, vous pouvez utiliser des outils en ligne ou PhotoShop et d'autres outils pour créer des images fictives adaptées au style de votre site Web. 🎜🎜🎜Grâce aux étapes ci-dessus, vous pouvez facilement obtenir l'effet de chargement paresseux des images et des images d'espace réservé dans Vue, ce qui peut réduire considérablement la pression de chargement du site Web et améliorer l'expérience utilisateur. 🎜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!