Uso de los comportamientos de carga por ventana y de actualización automática
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows Runtime. Si estás desarrollando para Windows 10, consulta la documentación más reciente ]
Windows 8.1 y las versiones posteriores admiten los comportamientos de carga por ventana y actualización automática.
Cada ventana de una aplicación con JavaScript tiene su propio Sistema de administración de recursos ResourceContext. Windows actualiza este ResourceContext si el usuario arrastra la ventana de la aplicación a un monitor con una resolución PPP distinta, si se produce un evento del sistema, como el cambio de idioma, o si invalidas expresamente un valor.
Aunque los recursos de una aplicación con JavaScript (cargada mediante los esquemas ms-appx: y ms-appx-web:) se resuelven mediante el Sistema de administración de recursos, no todos los recursos atraviesan el contexto de la ventana que realiza la solicitud. Solo estos tipos de descargas se resuelven mediante ResourceContext de la ventana:
CSS
- background-image
- border-image
- Contenido generado: list-style-image y content:url()
HTML
- Atributo "background" de los elementos (por ejemplo,
<body background='logo.png'>...</body>) - Atributo src de los elementos de imagen (por ejemplo,
<img src='logo.png' />) - Atributo src de los elementos para insertar (por ejemplo,
<embed width="100" height="100" src="logo.png" type="image/png" />) - Atributo data de los elementos de objeto (por ejemplo,
<object width="100" height="100" data="logo.png" type="image/png" />) - Imágenes que se cargan mediante el atributo href del elemento image de <svg>
- Atributo "background" de los elementos (por ejemplo,
JavaScript
- XHR (XMLHttpRequest)
Si tienes que resolver un recurso en el contexto de recurso de la ventana, pero dicho recurso no se encuentra en la lista anterior (por ejemplo, CSS para <link>), puedes usar XHR para recuperar el archivo resuelto correctamente.
Además, las aplicaciones con JavaScript admiten la "actualización automática" de determinadas imágenes. Esto significa que si el contexto del recurso de la ventana cambia, Windows en tiempo de ejecución vuelve a descargar automáticamente la imagen adecuada (si es necesario) y vuelve a visualizarla. Estos son los tipos de imagen admitidos para los que se hace esto:
CSS
- background-image
- border-image
- Contenido generado: list-style-image (pero no content:url())
En Windows 8.1 y posterior, al usar la "actualización automática", el CSS se simplifica.
Por ejemplo, en Windows 8, sin la actualización automática, este es el CSS que hubieras necesitado para actualizar una imagen cuando cambia la resolución PPP o el idioma:
@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');
}
}
En Windows 8.1 y posterior, el código CSS anterior podría convertirse en:
div.imageBackground {
background-image: url('logo.png');
}