CSS (JS 없음)를 사용하여 이미지를 미리로드하는 방법은 무엇입니까?

문제

JavaScript를 사용하지 않고 CSS를 사용하여 이미지를 사전로드하려면 어떻게해야합니까? 크로스 브라우저 여야합니다.

CSS 스프라이트를 사용하고 싶지 않습니다. 다른 솔루션이 있습니까?

해결책

숨겨진 여러 요소를 사용할 수 있습니다 background-position: -1000px -1000px; 그리고 그들에게 background-image 사전로드하려는 각 이미지에 대해.

다른 팁

엔딩 바디 태그 전에 모두로드하고 표시 할 수 없습니다. 그런 다음 나중에 전화하면 동일한 경로를 사용하면 캐시에 있어야합니다.

<img src="/i/myimage.jpg" alt="image preload" style="display:none;" />

당신은 또한 디스플레이로 클래스를 만들 수 있으며,없고 사전로드하려는 모든 이미지에도 적용 할 수 있습니다.

그래도 더 많은 HTTP 요청이 발생할 것이며, 당신이 그 결과를 줄이려면 CSS 스프라이트를 제안하는 경우, 그것이 당신과 관련이 있다면 제안합니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow