Utilisation des comportements d’actualisation automatique et de chargement par fenêtre

  • Article

[ Cet article est destiné aux développeurs Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Les systèmes Windows 8.1 et plus prennent en charge les comportements d’actualisation automatique et de chargement par fenêtre.

Chaque fenêtre d’une application JavaScript présente son propre système de gestion des ressources ResourceContext. Windows met à jour cet élément ResourceContext si l’utilisateur fait glisser la fenêtre d’application vers un écran présentant une résolution différente, si un événement système tel qu’une modification de langue se produit ou si vous remplacez explicitement une valeur.

Les ressources n’accèdent pas toutes au contexte de la fenêtre dont provient la demande, même si celles d’une application JavaScript (chargée via des schémas ms-appx: et ms-appx-web:) sont résolues à l’aide du système de gestion des ressources. Seuls les types de téléchargement suivants sont résolus via l’élément ResourceContext de la fenêtre :

  • CSS

    • background-image
    • border-image
    • Contenu généré : list-style-image et content:url()

  • HTML

    • Attribut background sur les éléments (par exemple : <body background='logo.png'>...</body>)
    • Attribut src pour les éléments image (par exemple : <img src='logo.png' />)
    • Attribut src pour les éléments embed (par exemple : <embed width="100" height="100" src="logo.png" type="image/png" />)
    • Attribut data pour les éléments object (par exemple : <object width="100" height="100" data="logo.png" type="image/png" />)
    • Images chargées via l’attribut href de l’élément image dans <svg>

  • JavaScript

    • XHR (XMLHttpRequest)

Si vous devez résoudre une ressource par rapport au contexte de ressources de la fenêtre, mais qu’elle ne figure pas dans la liste précédente (par exemple : CSS pour <link>), vous pouvez utiliser XHR pour récupérer le fichier correctement résolu.

En outre, les applications JavaScript prennent maintenant en charge l’actualisation automatique de certaines images. Ainsi, si le contexte de ressources de la fenêtre est modifié, Windows Runtime télécharge et affiche à nouveau (si nécessaire) l’image appropriée et ce, automatiquement. Voici les types d’image pris en charge qui sont concernés par cette opération :

CSS

  • background-image
  • border-image
  • Contenu généré : list-style-image (mais non content:url())

Dans Windows 8.1 et versions ultérieures, l’« actualisation automatique » permet de simplifier votre code CSS.

Par exemple, dans Windows 8, sans l’actualisation automatique, voici le code CSS dont vous auriez pu avoir besoin pour mettre à jour une image en cas de modification de la résolution ou de la langue :

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

Dans Windows 8.1 et versions ultérieures, le code CSS précédent pourrait juste devenir comme suit :

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

Rubriques associées

Système de gestion des ressources

Démarrage rapide : utilisation de ressources de fichiers ou d’images