| [ Web Proxy ] |
| Viewing: https://developer.mozilla.org/de/docs/Web/API/HTMLImageElement/loading | [Back] [Original] |
Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen bersetzt, und kann Fehler enthalten. Erfahre mehr ber dieses Experiment.
Diese Funktion ist gut etabliert und funktioniert auf vielen Gerten und in vielen Browserversionen. Sie ist seit Mrz 2022 browserbergreifend verfgbar.
Die loading-Eigenschaft des HTMLImageElement-Interfaces gibt dem Browser einen Hinweis, wie das Laden des Bildes, das sich derzeit auerhalb des Sichtfensters befindet, gehandhabt werden soll. Dies hilft dabei, das Laden der Inhalte des Dokuments zu optimieren, indem das Laden des Bildes aufgeschoben wird, bis es voraussichtlich bentigt wird, anstatt es sofort beim initialen Laden der Seite zu laden. Es spiegelt das loading-Inhaltsattribut des <img>-Elements wider.
Ein Zeichenfolgenwert, der entweder eager oder lazy ist. Fr deren Bedeutungen siehe die HTML <img>-Referenz.
Die unten gezeigte Funktion addImageToList() fgt eine Foto-Miniaturansicht zu einer Liste von Elementen hinzu, wobei Lazy-Loading verwendet wird, um zu vermeiden, dass das Bild aus dem Netzwerk geladen wird, bevor es tatschlich bentigt wird.
function addImageToList(url) {
const list = document.querySelector("div.photo-list");
const newItem = document.createElement("div");
newItem.className = "photo-item";
const newImg = document.createElement("img");
newImg.loading = "lazy";
newImg.width = 320;
newImg.height = 240;
newImg.src = url;
newItem.appendChild(newImg);
list.appendChild(newItem);
}
| Spezifikation |
|---|
| HTML # dom-img-loading |
<img>-ElementHTMLImageElementBeforeUnloadEventDOMStringMapErrorEventHTMLAnchorElementHTMLAreaElementHTMLAudioElementHTMLBRElementHTMLBaseElementHTMLBodyElementHTMLButtonElementHTMLCanvasElementHTMLDListElementHTMLDataElementHTMLDataListElementHTMLDialogElementHTMLDivElementHTMLDocumentHTMLElementHTMLEmbedElementHTMLFieldSetElementHTMLFormControlsCollectionHTMLFormElementHTMLFrameSetElementHTMLGeolocationElementHTMLHRElementHTMLHeadElementHTMLHeadingElementHTMLHtmlElementHTMLIFrameElementHTMLInputElementHTMLLIElementHTMLLabelElementHTMLLegendElementHTMLLinkElementHTMLMapElementHTMLMediaElementHTMLMenuElementHTMLMetaElementHTMLMeterElementHTMLModElementHTMLOListElementHTMLObjectElementHTMLOptGroupElementHTMLOptionElementHTMLOptionsCollectionHTMLOutputElementHTMLParagraphElementHTMLPictureElementHTMLPreElementHTMLProgressElementHTMLQuoteElementHTMLScriptElementHTMLSelectElementHTMLSourceElementHTMLSpanElementHTMLStyleElementHTMLTableCaptionElementHTMLTableCellElementHTMLTableColElementHTMLTableElementHTMLTableRowElementHTMLTableSectionElementHTMLTemplateElementHTMLTextAreaElementHTMLTimeElementHTMLTitleElementHTMLTrackElementHTMLUListElementHTMLUnknownElementHTMLVideoElementHashChangeEventHistoryImageDataLocationMessageChannelMessageEventMessagePortNavigatorPageRevealEventPageSwapEventPageTransitionEventPluginPluginArrayPromiseRejectionEventRadioNodeListTimeRangesUserActivationValidityStateWindowWorkletGlobalScopeDer Bauplan fr ein besseres Internet.
Teile dieses Inhalts sind 19982026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfgbar unter einer Creative-Commons-Lizenz.
| Web Proxy Viewer | New URL | Original Page |