HTMLMediaElement: loading-Eigenschaft
Die loading-Eigenschaft des HTMLMediaElement-Interfaces gibt dem Browser einen Hinweis darauf, wie das Laden von Medien, die sich derzeit außerhalb des visuellen Viewports des Fensters befinden, gehandhabt werden soll. Dies hilft, das Laden der Inhalte des Dokuments zu optimieren, indem das Laden der Medien bis zu dem Zeitpunkt verschoben wird, an dem sie voraussichtlich benötigt werden, anstatt sofort während des initialen Seitenladevorgangs. Sie spiegelt das loading-Inhaltsattribut des <audio>-Elements oder das loading-Inhaltsattribut des <video>-Elements wider.
Wert
Ein String, dessen Wert eager oder lazy ist. Für ihre Bedeutungen siehe die HTML-Referenz für <audio loading> oder <video loading>.
Beispiele
Grundlegende Verwendung
Die unten gezeigte Funktion addVideoToList() fügt ein Video-Thumbnail einer Liste von Elementen hinzu und verwendet Lazy-Loading, 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 Learning-Bereich
- Lazy Loading im MDN-Web-Performance-Leitfaden