Uso di comportamenti di caricamento per finestra e di aggiornamento automatico
[ Questo articolo è rivolto agli sviluppatori per Windows 8.x e Windows Phone 8.x che realizzano app di Windows Runtime. Gli sviluppatori che usano Windows 10 possono vedere Documentazione aggiornata ]
Windows 8.1 e versioni successive supportano comportamenti di caricamento per finestra e di aggiornamento automatico.
Ogni finestra in un'app scritta in JavaScript ha il proprio ResourceContext del Sistema gestione risorse. Windows aggiorna la classe ResourceContext se l'utente trascina la finestra dell'app in un monitor con un valore DPI diverso, se si verifica un evento di sistema come la modifica della lingua o se sostituisci in modo esplicito un valore.
Mentre le risorse in un'app scritta in JavaScript (caricate tramite gli schemi ms-appx: e ms-appx-web:) vengono risolte usando il Sistema gestione risorse, non tutte le risorse passano attraverso il contesto della finestra che invia la richiesta. Solo questi tipi di download vengono risolti usando la classe ResourceContext della finestra:
CSS
- background-image
- border-image
- Contenuto generato: list-style-image e content:url()
HTML
- Attributo 'background' negli elementi (ad esempio,
<body background='logo.png'>...</body>) - Attributo src per elementi image (ad esempio,
<img src='logo.png' />) - Attributo src per elementi embed (ad esempio,
<embed width="100" height="100" src="logo.png" type="image/png" />) - Attributo data per elementi object (ad esempio,
<object width="100" height="100" data="logo.png" type="image/png" />) - Immagini caricate usando l'attributo href dell'elemento image in <svg>
- Attributo 'background' negli elementi (ad esempio,
JavaScript
- XHR (XMLHttpRequest)
Se devi risolvere una risorsa rispetto al contesto di risorsa della finestra, ma la risorsa non è inclusa nell'elenco precedente (ad esempio, CSS per <link>), puoi usare XHR per recuperare il file risolto correttamente.
Le app di in JavaScript, inoltre, supportano l'aggiornamento automatico di determinate immagini. Di conseguenza, se il contesto di risorsa della finestra cambia, Windows Runtime (se necessario) scarica e visualizza di nuovo automaticamente l'immagine appropriata. Ecco i tipi di immagini supportati a cui avviene applicato questo comportamento:
CSS
- background-image
- border-image
- Contenuto generato: list-style-image (ma non content:url())
In Windows 8.1 e versioni successive è possibile semplificare il codice CSS usando l'aggiornamento automatico.
Ad esempio, in Windows 8 senza aggiornamento automatico ecco il codice CSS che potrebbe essere necessario per aggiornare un'immagine quando cambia il valore DPI o la lingua:
@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 e versioni successive il codice CSS precedente potrebbe diventare semplicemente questo:
div.imageBackground {
background-image: url('logo.png');
}