Обмен ссылками дважды загружается

Я пишу простой шаблон кода в PHP для создания тега обмена IMG в HTML. Изображение меняет местами разным размерам, проблема заключается в том, что браузер всегда загружается дважды, после правильного изображения, которое я указываю, и после самого высокого разрешения.Обмен ссылками дважды загружается

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 } ?>

Markup

<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">

Результат
network in chrome dev tools, two image downloads

Я сравнены с разметкой и поведения на сайте Фонда и их скачивает один раз. Использование FFX 33 и Chrome 38 Пример

Foundation
Вот пример на 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">

Сеть

network in dev tools, one download

UPDATE: Тестирование без атрибута SRC на Img загрузки только правильный файл, все еще не уверен, что вызывает это, ле код на документы Фонд ЦСИ и загружает только один раз

источник

2014-11-20 blackbird

From the docs:

Последнее правило, которое вычисляется верно будет изображение, которое получает заряженное. Мы рекомендуем установить изображение src на самый маленький, , так как он всегда будет загружен.

Обратите внимание, что вы не должны опускать атрибут src, он необходим +, он будет использоваться для поисковых систем. Но вы можете предотвратить его загрузки (может быть изворотливым) https://stackoverflow.com/a/1667886/1224362

источник

2014-11-20 04:08:38 JAre

Я знаю, я не хочу пропустить src. Я просто говорю, что это работает, если я это сделаю. Первый пример с использованием изображений на фундаменте имеет src, но загружается только один раз – blackbird

@ Blackbird57 Interchange не будет запрашивать изображение снова, если атрибут src установлен на изображение, соответствующее запросу мультимедиа. – JAre

src в соответствии с запросом на медиа? Но как я узнаю, какая из них правильная, когда я пишу код, вот в чем смысл использования обмена, не так ли? :) – blackbird

AFAIK правильный синтаксис:

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

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

Так у вас есть два элемента для вашего изображения. Один для intercharge (обратите внимание, что по умолчанию всегда будет загружен) и один для SEO/браузеров без JS.

Подробнее here.

источник

2014-11-20 08:18:01 neciu

Атрибут src требуется для тега img http://w3c.github.io/html-reference/img.html без него страница не сможет проверить валидацию + он может вести себя странно (например, «img.complete» для некоторых браузеров будет «истинным» и «ложным» для других). С другой стороны, пустой src также проблематичен - он может вызвать запрос на страницу. – JAre

Да, но на той же странице код, который они используют, включает атрибут src для обмена данными img, и он загружается только один раз: - / – blackbird

Обмен ссылками дважды загружается

ответ

Смежные вопросы