2016-10-12 4 views
2

반응 형 웹 템플릿을 개발할 때 srcset 속성을 사용하여 현재 뷰포트 크기에 따라 다른 이미지를로드합니다. 이것은 일반적으로 잘 작동합니다. 그러나 생산 모드에서, 이미지는 DAM (Digital Asset Management System)으로부터 로딩되며, 여기서 특별한 파라미터는 요구 된 이미지를 스케일링하고 자르기 위해 사용된다.2 개의 srcset 이미지가로드되는 이유는 무엇입니까?

<img src="{url}/s,x,586,y,0/{img_id}" 
    srcset="{url}/s,x,293,y,0/{img_id} 293w, 
      {url}/s,x,440,y,0/{img_id} 440w, 
      {url}/s,x,586,y,0/{img_id} 586w" 
    sizes="(max-width: 520px) 100vw, (max-width: 1010px) 40vw, 15vw" /> 

문제는 다음과 같습니다. 이제 모든 이미지가 두 번로드됩니다 (440w 및 586w). 캐싱 문제입니까?

+0

해당 문제를 재현하지 못했습니다. 내 테스트 (Firefox 49)에서는 293w 버전 만로드되었습니다. 영향을받은 페이지에 대한 링크를 제공 할 수 있습니까? 어떤 브라우저와 버전을 사용하셨습니까? – ausi

답변

0

코드가 완벽하게 잘 보입니다. 브라우저의 크기를 조정하거나 태블릿을 돌리지 않으면 브라우저에서 이미지 중 하나만로드해야합니다.