HTMLLinkElement: Eigenschaft imageSrcset

Baseline

Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Dezember 2023 browserübergreifend verfügbar.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Die Eigenschaft imageSrcset der Schnittstelle HTMLLinkElement ist eine Zeichenfolge, die eine oder mehrere durch Kommas getrennte Bildkandidaten-Zeichenfolgen angibt. Diese Eigenschaft spiegelt den Wert des Attributs imagesrcset des Elements <link> wider. Mit dieser Eigenschaft können Sie den Wert des Attributs imagesrcset abrufen oder festlegen.

Jede Bildkandidaten-Zeichenfolge enthält eine Bild-URL und optional einen Deskriptor für die Breite und/oder Pixeldichte. Diese Deskriptoren geben an, unter welchen Bedingungen das jeweilige Bild verwendet werden soll.

"images/team-photo.jpg, images/team-photo-retina.jpg 2x, images/team-photo-large.jpg 1400w"

Bei HTML-Elementen <link>, für die rel="preload" und as="image" festgelegt sind, hat das Attribut imagesrcset eine ähnliche Syntax und Semantik wie das Attribut srcset des Elements <img>. Es gibt an, welche Ressource für ein <img>-Element mit entsprechenden Werten für dessen Attribute srcset und sizes vorab geladen werden soll.

Wenn die Eigenschaft imageSrcset Breiten-Deskriptoren enthält, darf die Eigenschaft imageSizes nicht null sein. Andernfalls wird der Wert von imageSrcset ignoriert.

Wert

Eine Zeichenfolge mit einer durch Kommas getrennten Liste aus einer oder mehreren Bildkandidaten-Zeichenfolgen oder die leere Zeichenfolge "", wenn kein Wert angegeben ist.

Beispiele

Gegeben sei das folgende <link>-Element:

html

<link
  rel="preload"
  as="image"
  imagesizes="50vw"
  imagesrcset="bg-narrow.png, bg-wide.png 800w" />

<pre id="log"></pre>

#log {
  padding: 0 0.25rem;
  font-size: 1.2em;
  line-height: 1.4;
}

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

Mit der Eigenschaft imageSrcset können Sie auf den Wert des Attributs imagesrcset zugreifen und ihn ändern:

const link = document.querySelector("link");
log(`Original: ${link.imageSrcset}`);

// add an image candidate string
link.imageSrcset += ", bg-huge.png 1200w";
log(`Updated: ${link.imageSrcset}`);

Spezifikationen

Spezifikation
HTML # dom-link-imagesrcset

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden