HTMLLinkElement: imageSrcset-Eigenschaft

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die imageSrcset-Eigenschaft des HTMLLinkElement-Interfaces ist ein String, der einen oder mehrere durch Kommas getrennte Image-Candidate-Strings identifiziert. Diese Eigenschaft spiegelt den Wert des link-Elements im [imagesrcset]-Attribut wider. Diese Eigenschaft kann den Wert des imagesrcset-Attributs erhalten oder setzen.

Jeder Image-Candidate-String enthält eine Bild-URL und einen optionalen Breiten- und/oder Pixeldichte-Deskriptor, der die Bedingungen angibt, unter denen dieses Kandidatenbild verwendet werden soll.

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

Für HTML-<link>-Elemente mit rel="preload" und as="image" gesetzt, hat das imagesrcset-Attribut eine ähnliche Syntax und Semantik wie das srcset-Attribut des <img>-Elements, welches angibt, die geeignete Ressource vorab zu laden, die durch ein <img>-Element mit entsprechenden Werten für seine srcset- und sizes-Attribute verwendet wird.

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

Wert

Ein String, der aus einer durch Kommas getrennten Liste von einem oder mehreren Image-Candidate-Strings besteht, oder der leere String "", wenn nicht angegeben.

Beispiele

Angenommen, 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;
}

…können wir den Wert des imagesrcset-Attributs abrufen und aktualisieren, indem wir die imageSrcset-Eigenschaft verwenden:

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

Specification
HTML # dom-link-imagesrcset

HTMLLinkElement: imageSrcset-Eigenschaft

Wert

Beispiele

Spezifikationen

Browser-Kompatibilität

Siehe auch