재단 교환 다운로드 두 번

Question

HTML에서 교환 img 태그를 생성하기 위해 PHP에 간단한 템플릿 코드를 작성하고 있습니다. 이미지가 다른 크기로 바뀌면 문제는 브라우저가 항상 두 번, 내가 지정한 올바른 이미지를 한 번, 가장 높은 해상도를 한 번 다운로드한다는 것입니다.

PHP

if($page->hasImages()){ 
    $image = $page->image(); 

    $small = thumb($image, array('width' => 300))->url() ; 
    $medium = thumb($image, array('width' => 600))->url() ; 
    $large = thumb($image, array('width' => 900))->url() ; ?> 

    <img data-interchange="[<?php echo $medium; ?>, (default)], 
    [<?php echo $small; ?>, (small)], 
    [<?php echo $medium; ?>, (medium)], 
    [<?php echo $large; ?>, (large)]" 
    src="<?php echo $large; ?>"> 
<?php } ?> 

마크 업

<img data-interchange="[.../thumbs/2500x400-239ccc449c26c0e384a3a1a6402a37f1.jpg, (default)], 
[.../thumbs/2500x400-62601f35a590e4c8b64be412dc67779d.jpg, (small)], 
[.../thumbs/2500x400-239ccc449c26c0e384a3a1a6402a37f1.jpg, (medium)], 
[.../thumbs/2500x400-6a0974d125585865c962c1f9372bd30a.jpg, (large)]" 
src=".../thumbs/2500x400-6a0974d125585865c962c1f9372bd30a.jpg" 
data-uuid="interchange-i2pip11r1"> 

결과

나는 재단 사이트의 마크 업과 행동에 대해 비교하고 그들의 한 번 다운로드합니다. IMG 다운로드에 src 속성없이 테스트 : 여기에 docs

<img data-interchange="[../assets/img/examples/space-small.jpg, (small)], 
[../assets/img/examples/space-medium.jpg, (medium)], 
[../assets/img/examples/space-large.jpg, (large)]" 
data-uuid="interchange-i2qxxgtv0" 
src="../assets/img/examples/space-large.jpg"> 

네트워크

UPDATE의 예입니다
FFX (33)과 크롬 (38)

재단의 예를 사용 올바른 파일 일 뿐이며, 무엇이 원인인지 확실하지 않습니다. 재단 문서에 르 코드는 SRC 및 다운로드로드 를 얻을 이미지가 될 것입니다 true로 평가 한 번만

Answer 1

From the docs:

마지막 규칙이있다. 이미지가 으로 가장 작게 설정하는 것이 좋습니다. 항상로드됩니다..

src 속성을 생략해서는 안되며 검색 엔진에 필요합니다. 올바른 구문은 AFAIK하지만 당신은 (기발한 수 있습니다) https://stackoverflow.com/a/1667886/1224362

Answer 2

로드 것을 방지 할 수 있습니다

<img data-interchange="[/path/to/default.jpg, (default)], 
         [/path/to/bigger-image.jpg, (large)]"> 

<noscript> 
    <img src="/path/to/default.jpg"> 
</noscript> 

그래서 당신은 당신의 이미지에 대한 두 가지 요소가있다. 하나는 인터체인지 (기본값은 항상로드됩니다)이고 다른 하나는 JS가없는 SEO/브라우저 용입니다.

자세히 알아보기 here.