Поделиться через

Использование пооконной загрузки и режимов автоматического обновления

  • Статья

[ Эта статья адресована разработчикам приложений среды выполнения Windows для Windows 8.x и Windows Phone 8.x. В случае разработки приложений для Windows 10 см. раздел последняя документация]

В Windows 8.1 и более поздних версиях поддерживается пооконная загрузка и режимы автоматического обновления.

Каждое окно в приложении на JavaScript имеет собственную систему управления ресурсами ResourceContext. Windows обновляет этот объект ResourceContext, когда пользователь перетаскивает окно приложения на монитор с другим значением DPI или когда происходит системное событие, например меняется язык, а также если вы явно переопределяете значение.

Ресурсы в приложении на JavaScript (которые загружаются по протоколам ms-appx: и ms-appx-web:) разрешаются с помощью системы управления ресурсами, но не все ресурсы проходят через контекст окна, которое создает запрос. С помощью объекта ResourceContext окна разрешаются только скачиваемые ресурсы следующих типов:

  • CSS

    • background-image
    • border-image
    • Создаваемое содержимое: list-style-image и content:url()

  • HTML

    • Фоновый атрибут элементов (например, <body background='logo.png'>...</body>)
    • Атрибут src для элементов изображений (например, <img src='logo.png' />)
    • Атрибут src для встроенных элементов (например, <embed width="100" height="100" src="logo.png" type="image/png" />)
    • Атрибут data для объектных элементов (например, <object width="100" height="100" data="logo.png" type="image/png" />)
    • Изображения, загружаемые с помощью атрибута href элемента image в <svg>

  • JavaScript

    • XHR (XMLHttpRequest)

Если необходимо разрешить ресурс в контексте ресурса окна, однако этот ресурс отсутствует в предшествующем списке (например, CSS для <link>), то вы можете получить правильно разрешенный файл с помощью XHR.

Кроме того, приложения на JavaScript поддерживают автоматическое обновление некоторых изображений. Это значит, что если изменяется контекст ресурса окна, среда выполнения Windows автоматически (в случае необходимости) повторно скачивает и отображает соответствующее изображение. Вот типы изображений, для которых поддерживается такое обновление:

CSS

  • background-image
  • border-image
  • Создаваемое содержимое: list-style-image (но не content:url())

В Windows 8.1 и более поздних версиях использование автоматического обновления упрощает код CSS.

Например, в Windows 8, где нет автоматического обновления, код CSS, необходимый для обновления изображения при изменении DPI или языка, выглядит так:

    @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');
        }
    }

В Windows 8.1 и более поздних версиях эквивалентный код CSS будет выглядеть проще:

    div.imageBackground {
        background-image: url('logo.png');
    }

Связанные разделы

Система управления ресурсами

Краткое руководство: использование файловых и графических ресурсов