HTMLMediaElement: loading-Eigenschaft
Eingeschränkt verfügbar
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.
Die loading-Eigenschaft der HTMLMediaElement-Schnittstelle gibt dem Browser einen Hinweis darauf, wie das Laden von Medien gehandhabt werden soll, die sich derzeit außerhalb des visuellen Viewports des Fensters befinden. Dies hilft, das Laden der Inhalte des Dokuments zu optimieren, indem das Laden der Medien aufgeschoben wird, bis sie voraussichtlich benötigt werden, anstatt unmittelbar während des anfänglichen Seitenladens. Sie spiegelt das loading-Inhaltsattribut des <audio>-Elements oder das loading-Inhaltsattribut des <video>-Elements wider.
Wert
Ein String, dessen Wert entweder eager oder lazy ist. Für deren Bedeutungen siehe die HTML-Referenz für <audio loading> oder <video loading>.
Beispiele
Grundlegende Verwendung
Die unten gezeigte addVideoToList()-Funktion fügt eine Videominiatur zu einer Liste von Elementen hinzu, indem sie Lazy-Loading verwendet, um das Laden des Videos aus dem Netzwerk zu vermeiden, bis es tatsächlich benötigt wird.
function addVideoToList(url) {
const list = document.querySelector("div.video-list");
const newItem = document.createElement("div");
newItem.className = "video-item";
const newVideo = document.createElement("video");
// Lazy-load if supported
if ("loading" in HTMLVideoElement.prototype) {
newVideo.loading = "lazy";
} else {
// If native lazy-loading is not supported you may want to consider
// alternatives, though this may be fine as a progressive enhancement.
}
newVideo.width = 320;
newVideo.height = 240;
newVideo.src = url;
newItem.appendChild(newVideo);
list.appendChild(newItem);
}
Spezifikationen
| Spezifikation |
|---|
| HTML # attr-media-loading |
Browser-Kompatibilität
Siehe auch
- Das
<audio>-Element - Das
<video>-Element - Web-Performance im MDN-Lernbereich
- Lazy Loading im MDN-Web-Performance-Leitfaden