이미지가 페이지의 다른 곳에서 더 빨리로드하여 이미지를 예압하는 방법은 좋은 방법입니까?

Question

다음은 다음과 같습니다. 마커가 많은 Google지도가 있습니다.

문제는 맵이로드되고 잠시 동안 비어 있고 마커 만 표시된다는 것입니다. 마커는 맞춤형 PNG입니다.

내 생각은 그들을 "예압"하는 것입니다 (올바른 단어인지 확실하지 않음). 맵과 거의 동시에 나타납니다.

지금까지 한 일은 맵,지도 외부, 페이지의 앞부분에서 사용하는 것과 동일한 이미지를 추가하는 것입니다. display:none;

확실하지 않지만 맵과 이미지 사이의 시간이 줄어드는 것 같습니다.

그것이 가장 좋은 방법인가, 좋은 관행입니까?

Answer 1

"스프라이트", 즉 단일 PNG에 별도의 이미지 모음을 사용할 수 있습니다. 이는 단 1 부하, 즉 별도의 하중이 적다는 이점이 있습니다. Google GWT는이 기술을 많이 푸시합니다 (예 : 이미지 번들).

이 기술의 값은로드가 필요한 개별 이미지의 수에 따라 증가합니다. 별도의 이미지가 많을수록로드하는 데 더 오래 걸립니다.

Answer 2

사용하지 마십시오 display:none 사전 로딩을 위해. 요소가 설정 되었기 때문입니다 display:none 렌더링하지 않습니다 어느 물리적 속성 중에서도 브라우저는 가시가 될 때까지 다운로드하는 것을 귀찮게하지 않습니다.

대안은 사용하는 것입니다 visibility:hidden, 그러나 당신은 거의 같은 일을하는 사용자 에이전트에 들어갈 위험이 있습니다. visibility:hidden 브라우저는 이미지의 상자 모델을 계산해야하며 이미지가로드되어야합니다 (치수를 얻기 위해). 그래도 IE6에서 작동한다고 생각하지 않습니다.

마지막 기술 (그리고 내가 가장 좋아하는)은 </body> 꼬리표. 절대적으로 배치하십시오 left: -99999999px; top: -99999999px. 브라우저는 이미지를 렌더링하고 결과적으로로드해야하며 다루는 지저분한 JavaScript가 없습니다.

이제 문제를 문제와 통합하려면 Google지도 코드를 넣으십시오. ~ 후에 당신의 "예압 div". 브라우저는 코드를 실행하기 전에 이미지를로드해야합니다. 이것은 당신의 문제를 해결해야합니다.

도움이 되었기를 바랍니다!

Answer 3

대부분의 최신 브라우저를 기억하는 것에서 이미지는 항상 한 번만로드됩니다 (이미지의 SRC가 동일합니다). 지도가로드되기 전에로드하는 것을 의미한다고 생각합니다.

제 생각에는 그다지 중요하지 않습니다. 마커는 맵 이미지 자체에 비해 비교적 가볍기 때문에 맵 없이는 실제로 사용할 수 없습니다.

사용자 경험이 향상된다고 생각한다면 좋은 관행이라고 생각하지만 더 깨끗한 방식으로 가져 오려고 노력할 것입니다. 아마도 페이지로드 초기에 Ajax 호출일까요?

보세요 Ajax in Action : Preloading 이미지