Verwenden von fensterbasiertem Laden und automatischer Aktualisierung
[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation ]
Windows 8.1 und höher unterstützen fensterbasiertes Laden und automatische Aktualisierung.
Jedes Fenster in einer JavaScript-App verfügt über ein eigenes Ressourcenverwaltungssystem ResourceContext. Windows aktualisiert ResourceContext, wenn der Benutzer das App-Fenster in einen Monitor mit einem anderen DPI-Wert zieht, wenn ein Systemereignis (z. B. eine Sprachänderung) auftritt oder wenn Sie einen Wert explizit überschreiben.
Ressourcen in einer JavaScript-App (geladen über das ms-appx:-Schema und ms-appx-web:-Schema) werden mit dem Ressourcenverwaltungssystem aufgelöst. Es durchlaufen jedoch nicht alle Ressourcen den Kontext des Fensters, über das die Anforderung gesendet wird. Nur die folgenden Arten von Downloads werden über das ResourceContext-Element des Fensters gelöst:
CSS
- background-image
- border-image
- Generierte Inhalte: list-style-image und content:url()
HTML
- Hintergrundattribut für Elemente (z. B.
<body background='logo.png'>...</body>) - Das src-Attribut für Bildelemente (z. B.
<img src='logo.png' />) - Das src-Attribut für eingebettete Elemente (z. B.
<embed width="100" height="100" src="logo.png" type="image/png" />) - Das data-Attribut für Objektelemente (z. B.
<object width="100" height="100" data="logo.png" type="image/png" />) - Bilder, die unter Verwendung des href-Attributs des image-Elements in <svg> geladen werden
- Hintergrundattribut für Elemente (z. B.
JavaScript
- XHR (XMLHttpRequest)
Wenn Sie eine Ressource unter Verwendung des Ressourcenkontexts eines Fensters auflösen müssen, die Ressource jedoch nicht in der vorherigen Liste enthalten ist (z. B. CSS für <link>), können Sie XHR zum Abrufen der korrekt aufgelösten Datei verwenden.
Darüber hinaus unterstützen JavaScript-Apps die automatische Aktualisierung bestimmter Bilder. Das heißt, wenn sich der Ressourcenkontext des Fensters ändert, lädt die Windows-Runtime das entsprechende Bild, falls erforderlich, automatisch erneut herunter und zeigt es erneut an. Die folgenden Bildtypen werden aktualisiert:
CSS
- background-image
- border-image
- Generierte Inhalte: list-style-image (jedoch nicht content:url())
In Windows 8.1 und höher wird die Verwendung von CSS dank "auto-refresh" erheblich vereinfacht.
Das folgende Beispiel zeigt ein CSS, dass Sie in Windows 8 erstellen mussten, um ein Bild bei Änderungen des DPI-Werts oder der Sprache zu aktualisieren:
@media all and (max-resolution: 134dpi) {
/* Load 100% image when scaled by 100% */
div.imageBackground:-ms-lang(en) {
background-image: url('logo.png?s=100&lang=en');
}
div.imageBackground:-ms-lang(fr) {
background-image: url('logo.png?s=100&lang=fr');
}
}
@media all and (min-resolution: 135dpi) {
/* Load 140% image when scaled by 140% */
div.imageBackground:-ms-lang(en) {
background-image: url('logo.png?s=140&lang=en');
}
div.imageBackground:-ms-lang(fr) {
background-image: url('logo.png?s=140&lang=fr');
}
}
@media all and (min-resolution: 174dpi) {
/* Load 180% image when scaled by 180% */
div.imageBackground:-ms-lang(en) {
background-image: url('logo.png?s=180&lang=en');
}
div.imageBackground:-ms-lang(fr) {
background-image: url('logo.png?s=180&lang=fr');
}
}
In Windows 8.1 und höher reduziert sich dieses CSS auf Folgendes:
div.imageBackground {
background-image: url('logo.png');
}