창별 로드 및 자동 새로 고침 동작 사용

아티클
01/28/2016

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

Windows 8.1 이상에서는 창별 로드 및 자동 새로 고침 동작을 지원합니다.

JavaScript 앱의 각 창에는 자체 리소스 관리 시스템 ResourceContext이 있습니다. 사용자가 앱 창을 다른 DPI의 모니터로 끌거나, 언어 변경 등의 시스템 이벤트가 발생하거나, 명시적으로 값을 재정의할 경우 Windows에서 이 ResourceContext을(를) 업데이트합니다.

리소스 관리 시스템을 사용하여 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" />)
- **<svg>**에 있는 image 요소의 href 특성을 사용하여 로드된 이미지
JavaScript
- XHR(XMLHttpRequest)

리소스를 창의 리소스 컨텍스트에 대해 확인해야 할 경우 리소스가 위 목록에 없으면(예: **<link>**에 대한 CSS), XHR을(를) 사용하여 올바르게 확인된 파일을 검색할 수 있습니다.

또한 JavaScript 앱은 이제 일부 이미지의 "자동 새로 고침"을 지원합니다. 즉, 창의 리소스 컨텍스트가 변경될 경우 Windows 런타임은 자동으로(필요한 경우) 적절한 이미지를 다시 다운로드한 후 다시 표시합니다. 다음은 이 작업에 지원되는 이미지 유형입니다.

CSS

background-image
border-image
생성된 콘텐츠: list-style-image(content:url()은 아님)

Windows 8.1 이상에서는 "자동 새로 고침"을 사용하여 CSS가 간소화되었습니다.

예를 들어 자동 새로 고침을 사용하지 않는 Windows 8에서 DPI 또는 언어가 변경될 때 이미지를 업데이트하기 위해 필요할 수 있는 CSS는 다음과 같습니다.

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

Share via

창별 로드 및 자동 새로 고침 동작 사용

관련 항목

추가 리소스