Фундаментальная развязка скачивается дважды

Я пишу простой код шаблона на 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 } ?>

Разметка

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

Результат
сеть в chrome dev tools, загрузка двух изображений

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

Пример Foundation
Вот пример в документации

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

Сеть

сеть в инструментах разработчика, одна загрузка

ОБНОВЛЕНИЕ: при тестировании без атрибута src в img загружается только правильный файл, но все еще не известно, что вызывает это, образец кода в документации Foundation имеет src и загружается только один раз.


javascript php html zurb-foundation data-interchange
person blackbird    schedule 20.11.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Из документов:

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

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

person JAre    schedule 20.11.2014
comment
Я знаю, я не хочу пропускать src, я просто говорю, что это сработает, если я это сделаю. Первый пример с использованием изображений на основании имеет src, но загружается только один раз. - person blackbird; 20.11.2014
comment
@ Blackbird57 Interchange не будет снова запрашивать изображение, если атрибут src установлен на изображение, которое соответствует медиа-запросу. - person JAre; 21.11.2014
comment
src для соответствия медиа-запросу? Но как я узнаю, какой из них правильный, когда я пишу код, в этом весь смысл использования обмена, не так ли? :) - person blackbird; 21.11.2014
comment
@ Blackbird57, поэтому они рекомендуют вам установить src вашего изображения на самый маленький, так как он всегда будет загружаться. в дополнение к другому изображению, которое выбирается правилом медиа-запроса, если это не то же изображение. Так что у вас будут небольшие накладные расходы, но это не критично, так как самое маленькое изображение, ну ... маленькое. Вы можете попытаться предотвратить его загрузку с помощью каких-то хакерских вещей, но IMHO это не стоит проблем. - person JAre; 21.11.2014
comment
Тогда почему их пример загружает только одно изображение? Я добавил информацию в вопрос, проверьте код - person blackbird; 21.11.2014
comment
@ Blackbird57 у них просто нет атрибута src <img data-interchange="[../assets/img/examples/space-small.jpg, (small)], [../assets/img/examples/space-medium.jpg, (medium)], [../assets/img/examples/space-large.jpg, (large)]"> Interchange добавляет его позже, что не рекомендуется, но, судя по всему, для них этого достаточно. - person JAre; 21.11.2014
comment
Ух, я чувствую себя такой глупой. Вы правы, src добавляется динамически, теперь это имеет смысл, спасибо - person blackbird; 21.11.2014

arrow_upward
1
arrow_downward

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

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

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

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

Дополнительные сведения см. здесь.

person neciu    schedule 20.11.2014
comment
Атрибут src требуется для тега img w3c.github.io/html-reference/img. html без него страница не пройдет проверку + она может вести себя странно (например, img.complete для некоторых браузеров будет true и false для других). С другой стороны, пустой src тоже проблематичен - он может вызывать запросы к странице. - person JAre; 20.11.2014
comment
Да, но на той же странице код, который они используют, включает атрибут src в img обмена данными, и он загружается только один раз: - / - person blackbird; 21.11.2014