HTMLLinkElement: imageSrcset-Eigenschaft

Baseline 2023

Neu verfügbar

Seit December 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

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

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