많은 수의 이미지로드

Question

사용자가 제품을보고 구성 할 수있는 웹 사이트를 개발 중입니다. 이전 브라우저의 경우 jquery, css3 및 html5를 사용하여이 프로젝트를 시작하고 싶었습니다.

여러 개의 스프라이트로 모든 가장 작은 이미지를 결합하여 HTTP 요청 수를 줄였습니다 (쿠키가없는 하위 도메인에서 이미지가 제공됩니다). 그런데 각 구성 조합에 대해 360 °에서 제품을 볼 수 있어야합니다. 이렇게하면 2252 개의 이미지가 생성됩니다 (총 15MB).

2 개의 전용 서버가 있기 때문에 이것은 큰 문제는 아니지만 사용자 환경을 개선하는 가장 좋은 방법에 대해 생각하고 있습니다.

실제로 저는 기본 제품보기 용 이미지 만 미리로드하고 사용자가 설정을 변경하면 필요한 이미지를로드합니다 (jQuery는 여기에서 도움이됩니다). 이미지가로드되면 사용자는 "로드 중"gif를 보게됩니다. 이미지를 요청하지 않을 때 이미지를 미리로드해야합니까?

이미지는 브라우저에 의해 캐시되어 각 이미지는 304 수정되지 않은 응답이됩니다. 사용자 환경을 개선하기위한 조언이나 제안이 있습니까?

감사합니다.

Answer 1

제품 당 2252 개의 이미지가 있고 하나를 미리로드하는 경우 다른 이미지를 미리로드하는 것이 조금 쓸모없는 것처럼 보입니다. 아마도 시청자가 선택을 변경하고 2252 개의 이미지 중 다른 이미지가 필요합니다. 그 이미지가 미리로드 될 가능성은 매우 낮습니다.

다른 것보다 공통적 인 다양한 "속성"이있는 경우 몇 가지 미리로드 할 수 있습니다. 예를 들어, (귀하의 제품이 무엇인지 모릅니다.) 빨간색 셔츠와 핑크색 격자 무늬 XXXL 셔츠가있는 경우 먼저 빨간색을 미리 넣고 싶을 수 있습니다.)

이것은 jQuery에서의 애니메이션 효과 (페이드, 슬라이드 등)와 함께 플레이하는 것입니다. 속성 변경시 fadeOut 할 수 있습니다. 이 애니메이션은 서버에서 이미지를 가져와 가져 오는 데 필요한 600 밀리 초 정도의 시간이 걸릴 것입니다. 그 결과 새로운 뷰/속성에 대한 대기 시간이 느려집니다.

Answer 2

amazon s3과 같은 CDN에서 이미지를 검색하면로드 시간이 약간 향상 될 수 있습니다. 단계별 사전로드는 제품에 따라 다를 수 있습니다. Somethings는 자전하기 위하여 확률이 높다 - 예를 들면 landon가 말한 차. 나는 개인적으로 t 셔츠를 돌리는 것을 귀찮게하지 않을 것이지만 아마 차를 귀찮게 할 것입니다. 따라서 결정은 귀하의 사이트의 예상 된 사용을 기반으로 할 수 있습니다.