Heim >Web-Frontend >js-Tutorial >So implementieren Sie Lazy Loading von Bildern mit Layui
So implementieren Sie Lazy Loading von Bildern mit Layui
- WBOYOriginal
- 2023-10-24 09:55:432954Durchsuche
So verwenden Sie Layui, um das verzögerte Laden von Bildern zu implementieren
Lazy Loading ist eine gängige Technologie zur Webseitenoptimierung, die die Ladegeschwindigkeit von Webseiten optimiert, indem sie das Laden von Bildern verzögert. Layui ist ein leichtes Front-End-UI-Framework, das einfach und benutzerfreundlich ist und das verzögerte Laden von Bildern unterstützt. In diesem Artikel wird ausführlich erläutert, wie Sie mit Layui die Lazy-Loading-Funktion von Bildern implementieren, und es werden spezifische Codebeispiele bereitgestellt.
Zuerst müssen wir die relevanten Dateien von Layui vorstellen. Layui-bezogene Dateien können eingeführt werden, indem der HTML-Datei der folgende Code hinzugefügt wird:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/css/layui.css"> <script src="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/layui.js"></script>
Als nächstes müssen wir die HTML-Struktur schreiben, in der das Attribut lay-src zu den Bildern hinzugefügt werden soll Ich möchte die Lazy-Loading-Funktion verwenden und die Breite und Höhe des Bildes festlegen: lay-src属性，并设置图片的宽度和高度：
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<img lay-src="image1.jpg" style="max-width:90%" style="max-width:90%" alt="">
</div>
<div class="layui-col-md6">
<img lay-src="image2.jpg" style="max-width:90%" style="max-width:90%" alt="">
</div>
</div>
</div>然后，在JavaScript中初始化Layui，并启用懒加载功能：
layui.use('flow', function(){
var flow = layui.flow;
flow.lazyimg({
elem: '.layui-container img[lay-src]',
done: function(){
// 图片懒加载完成后的回调函数
}
});
});在初始化Layui的过程中，我们使用了layui.flow.lazyimg方法来启用图片懒加载功能。其中elem参数指定了要启用懒加载功能的图片元素的选择器，这里我们使用了.layui-container img[lay-src]来选择添加了lay-src属性的图片元素。
done
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片懒加载</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/css/layui.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md6">
<img lay-src="image1.jpg" style="max-width:90%" style="max-width:90%" alt="">
</div>
<div class="layui-col-md6">
<img lay-src="image2.jpg" style="max-width:90%" style="max-width:90%" alt="">
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/layui.js"></script>
<script>
layui.use('flow', function(){
var flow = layui.flow;
flow.lazyimg({
elem: '.layui-container img[lay-src]',
done: function(){
// 图片懒加载完成后的回调函数
}
});
});
</script>
</body>
</html> Dann initialisieren Sie Layui in JavaScript und aktivieren Sie die Lazy-Loading-Funktion: rrreee
Beim Initialisieren von Layui haben wirlayui verwendet .flow.lazyimg Methode zum Ermöglichen des verzögerten Ladens von Bildern. Der Parameter elem gibt den Selektor des Bildelements an, um die Lazy-Loading-Funktion zu aktivieren. Hier verwenden wir .layui-container img[lay-src], um lay-src. Der Parameter done ist eine optionale Rückruffunktion, die aufgerufen wird, wenn das verzögerte Laden des Bildes abgeschlossen ist. Auf diese Weise haben wir Layui erfolgreich verwendet, um die Lazy-Loading-Funktion von Bildern zu implementieren. Wenn die Seite in die Nähe des Bildelements scrollt, wird das Bild geladen und angezeigt, wodurch die Seitenladegeschwindigkeit optimiert wird. 🎜🎜Das Folgende ist der vollständige Beispielcode: 🎜rrreee🎜Das Obige sind die spezifischen Schritte und Codebeispiele für die Verwendung von Layui zum Implementieren der Lazy-Loading-Funktion von Bildern. Durch die Verwendung der von Layui bereitgestellten Lazy-Loading-Methode können wir die Lazy-Loading-Funktion von Bildern einfach implementieren und die Leistung und Benutzererfahrung von Webseiten verbessern. 🎜Das obige ist der detaillierte Inhalt vonSo implementieren Sie Lazy Loading von Bildern mit Layui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!