Usando comportamentos de carregamento por janela e de atualização automática
[ Este artigo destina-se aos desenvolvedores do Windows 8.x e do Windows Phone 8.x que escrevem aplicativos do Windows Runtime. Se você estiver desenvolvendo para o Windows 10, consulte documentação mais recente ]
O Windows 8.1 e versões posteriores dão suporte aos comportamentos de carregamento por janela e de atualização automática.
Cada janela em um aplicativo JavaScript tem seu próprio Sistema de Gerenciamento de Recursos ResourceContext. O Windows atualiza esse ResourceContext quando o usuário arrasta a janela do aplicativo para um monitor com um DPI diferente caso ocorra um evento do sistema, como a alteração de idioma, ou caso você substitua um valor de forma explícita.
Embora os recursos em um aplicativo JavaScript (carregado por meio dos esquemas ms-appx: e ms-appx-web:) sejam resolvidos com o Sistema de Gerenciamento de Recursos, nem todos os recursos passam pelo contexto da janela que faz a solicitação. Somente estes tipos de downloads são resolvidos por meio do ResourceContext da janela:
CSS
- background-image
- border-image
- Conteúdo gerado: list-style-image e content:url()
HTML
- Atributo de tela de fundo em elementos (por exemplo,
<body background='logo.png'>...</body>) - O atributo src para elementos de imagem (por exemplo,
<img src='logo.png' />) - O atributo src para elementos de inserção (por exemplo,
<embed width="100" height="100" src="logo.png" type="image/png" />) - O atributo data para elementos de objeto (por exemplo,
<object width="100" height="100" data="logo.png" type="image/png" />) - Imagens que são carregadas com o uso do atributo href do elemento de imagem image em <svg>
- Atributo de tela de fundo em elementos (por exemplo,
JavaScript
- XHR (XMLHttpRequest)
Se você deve resolver um recurso contra o contexto de recursos da janela, mas o recurso não está na lista anterior (por exemplo, CSS para <link>), pode usar XHR para recuperar o arquivo resolvido corretamente.
Além disso, os aplicativos JavaScript dão suporte à "atualização automática" de determinadas imagens. Isso significa que, se o contexto de recursos da janela for alterado, o Tempo de Execução do Windows automaticamente, se necessário, baixará e exibirá novamente a imagem apropriada. Aqui estão os tipos de imagens compatíveis para os quais isso é feito:
CSS
- background-image
- border-image
- Conteúdo gerado: list-style-image (mas não content:url())
No Windows 8.1 e posterior, usado a "atualização automática", seu CSS é simplificado.
Por exemplo, no Windows 8, sem a atualização automática, este é o CSS que você pode precisar atualizar com uma imagem quando o DPI ou a linguagem for alterada:
@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');
}
}
No Windows 8.1 e posterior, o código CSS anterior poderia se tornar:
div.imageBackground {
background-image: url('logo.png');
}