Using per-window loading and auto-refresh behaviors

  • Article

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

Windows 8.1 and later supports per-window loading and auto-refresh behaviors.

Each window in a JavaScript app has its own Resource Management System ResourceContext. Windows updates this ResourceContext if the user drags the app window to a monitor of a different DPI, if a system event like language change occurs, or if you explicitly override a value.

While resources in a JavaScript app (loaded via ms-appx: and ms-appx-web: schemes) are resolved using the Resource Management System, not all resources go through the context of the window that makes the request. Only these types of downloads are resolved by using the window's ResourceContext:

  • CSS

    • background-image
    • border-image
    • Generated content: list-style-image and content:url()

  • HTML

    • Background attribute on elements (for example, <body background='logo.png'>...</body>)
    • The src attribute for image elements (for example, <img src='logo.png' />)
    • The src attribute for embed elements (for example, <embed width="100" height="100" src="logo.png" type="image/png" />)
    • The data attribute for object elements (for example, <object width="100" height="100" data="logo.png" type="image/png" />)
    • Images that are loaded by using the href attribute of the image element in <svg>

  • JavaScript

    • XHR (XMLHttpRequest)

If you must resolve a resource against the window's resource context but the resource isn't in the preceding list (for example CSS for <link>), you can use XHR to retrieve the correctly resolved file.

Additionally, JavaScript apps support "auto-refresh" of certain images. This means that if the window's resource context changes, Windows Runtime automatically (if needed) re-downloads and re-displays the appropriate image. Here are the supported types of images for which this is done:

CSS

  • background-image
  • border-image
  • Generated content: list-style-image (but not content:url())

In Windows 8.1 and later, by using "auto-refresh", your CSS is simplified.

For example, in Windows 8, without auto-refresh, here is CSS you might have needed to update an image when the DPI or language changes:

    @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 and later, the preceding CSS code could just become:

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

Resource Management System

Quickstart: Using file or image resources