Heim > Artikel > Web-Frontend > Wie implementiert man mit Vue das verzögerte Laden von Bildern und Platzhalterbildern?
Auf Websites werden häufig Bilder verwendet, und die Frage, wie das Laden von Bildern optimiert werden kann, ist zu einem Schwerpunkt der Entwickler geworden. Eine der wichtigen Optimierungen ist das verzögerte Laden von Bildern. Dies bedeutet, dass Bilder im sichtbaren Bereich nur geladen werden, wenn der Benutzer auf der Webseite scrollt, und nicht im nicht gescrollten Bereich geladen werden, wodurch der Ladedruck der Seite verringert und die Leistung verbessert wird Benutzererfahrung.
Bei Verwendung des Vue-Frameworks können Sie das verzögerte Laden von Bildern und Platzhalterbildern einfach implementieren, indem Sie die darin enthaltenen Anweisungen verwenden.
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 // 图片加载的尝试次数 })
Unter anderem gibt preLoad das vorinstallierte Seitenverhältnis an, wenn Sie es beispielsweise festlegen auf 1,3, wenn das Bild vorab geladen wird, beträgt die Breite das 1,3-fache der Zielbreite; beim Laden handelt es sich um die Bildplatzhalterbilder, und beim Ladeversuch handelt es sich um die Anzahl der Versuche, das Bild zu laden.
src
durch den Befehl 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
mount
aktiviert. Der Bereich ist das Modul container
, sodass ein verzögertes Laden von Bildern erreicht werden kann. 🎜 Was die Produktion von Platzhalterbildern betrifft, können Sie Online-Tools oder Tools wie PhotoShop verwenden, um Platzhalterbilder zu erstellen, die zu Ihrem Website-Stil passen. 🎜🎜🎜Durch die oben genannten Schritte können Sie in Vue problemlos den Effekt des verzögerten Ladens von Bildern und Platzhalterbildern erzielen, wodurch der Ladedruck der Website erheblich verringert und die Benutzererfahrung verbessert werden kann. 🎜Das obige ist der detaillierte Inhalt vonWie implementiert man mit Vue das verzögerte Laden von Bildern und Platzhalterbildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!