Best Practice für die Implementierung des verzögerten Ladens von Bildern in Vue

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist die Webseitengeschwindigkeit nach und nach zu einem Schlüsselindikator geworden, der sich auf das Benutzererlebnis auswirkt. Um die Ladegeschwindigkeit von Webseiten zu verbessern, erwägen wir normalerweise die Verwendung eines verzögerten Ladens von Bildern. Beim verzögerten Laden von Bildern werden Bilder geladen, wenn die Seite zu einer bestimmten Position gescrollt wird. Dadurch kann das Problem des gleichzeitigen Ladens einer großen Anzahl von Bildern vermieden werden, was dazu führt, dass die Seite zu langsam geladen wird.

In diesem Artikel werden die Best Practices für die Verwendung von Vue zur Implementierung des verzögerten Ladens von Bildern vorgestellt.

1. Einführung der Drittanbieter-Bibliothek vue-lazyload

Das Vue-Framework selbst bietet keine Funktion zum verzögerten Laden von Bildern, daher müssen wir eine Drittanbieter-Bibliothek verwenden, um dies zu erreichen. Zu den häufig verwendeten Lazy-Loading-Bibliotheken gehören vue-lazyload, lozad.js usw. In diesem Artikel wird die Verwendung der Vue-Lazyload-Bibliothek empfohlen, da sie die folgenden Eigenschaften aufweist:

1. Leicht: Die Codegröße von Vue-Lazyload ist sehr klein und beträgt nach der GZIP-Komprimierung nur 2 KB.
2. Adaptiv: vue-lazyload kann Bilder unterschiedlicher Breite entsprechend der Bildschirmgröße verschiedener Geräte laden und so Netzwerkressourcen sparen.
3. Unterstützt vue2 und vue3: vue-lazyload kann beide Vue-Versionen 2 und 3 unterstützen.

Vue-lazyload installieren

Wir können npm oder Yarn verwenden, um vue-lazyload zu installieren:

npm install vue-lazyload

oder

yarn add vue-lazyload

Vue-lazyload importieren

Importieren Sie in der Vue-Eintragsdatei die vue-lazyload-Bibliothek und registrieren Sie sie global ：

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

Vue.use(VueLazyload)

2. Verwenden Sie die Lazyload-Anweisung in der Vorlage.

Nach der Verwendung der Vue-Lazyload-Bibliothek müssen wir nur noch die Lazyload-Anweisung in der Vorlage verwenden, um das verzögerte Laden von Bildern zu implementieren. Die Verwendung ist wie folgt:

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

Dabei repräsentiert imageURL die URL-Adresse des Bildes und alt den Bildbeschreibungstext.

Es ist zu beachten, dass wir, um zu verhindern, dass das Bild vor dem Laden angezeigt wird, empfehlen, ein Platzhalterbild mit der gleichen Größe wie das Bild im img-Tag festzulegen, wie unten gezeigt:

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

3. Lazyload konfigurieren

In der Eingabedatei von Vue können wir vue-lazyload global konfigurieren, wie unten gezeigt:

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

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

Dabei stellt preLoad den Abstand vom unteren Bildschirmrand zum Bild dar, wenn es mit dem Laden beginnt. Das heißt, am unteren Rand der Seite befindet sich immer noch etwas. Das Bild wird in einer Entfernung geladen, die dem 1,3-fachen der aktuellen Bildschirmhöhe entspricht. Fehler gibt die Bildadresse an, die angezeigt wird, wenn das Bild nicht geladen werden kann, Laden gibt die Bildadresse an, die angezeigt wird, wenn das Bild geladen wird, Versuch gibt die Anzahl der Neuladevorgänge an, nachdem das Bild nicht geladen werden konnte, und der Standardwert ist 1.

4. Fazit

In diesem Artikel wird die beste Vorgehensweise für die Verwendung der Vue-Lazyload-Bibliothek zur Implementierung des verzögerten Ladens von Bildern durch die Konfiguration von Lazyload vorgestellt. Abschließend möchte ich alle daran erinnern, dass Sie beim verzögerten Laden von Bildern auch darauf achten sollten, den Vorladeabstand und die Ladezeiten richtig zu steuern, um eine übermäßige Beanspruchung von Netzwerkressourcen und Mobilfunkverkehr zu vermeiden.

Das obige ist der detaillierte Inhalt vonBest Practice für die Implementierung des verzögerten Ladens von Bildern in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!