Браузер загружает два изображения: один для srcset, один для src (Chrome 41 и др.)

Я использую атрибут srcset на веб-странице, которую я разрабатываю.Браузер загружает два изображения: один для srcset, один для src (Chrome 41 и др.)

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 1200w, 
    img/picture-374x226.jpg 992w, 
    img/picture-305x185.jpg 768w, 
    img/picture-707x428.jpg 300w" />

Если я проверить, какие ресурсы загружаются со страницей, я вижу, что Chrome 41, а также FF с использованием polyfill, а также Safari 7 всегда загрузить изображение дважды - один раз в полном разрешении и один раз по размеру из атрибута srcset. Что я здесь делаю неправильно?

источник

2015-04-18 Miglosh

Можете ли вы подать тестовый пример, где вы видите, что это происходит в Chrome? Для не-поддерживающих браузеров «src» запускает загрузку до того, как полиполнит свое дело, но в Chrome это не должно быть –

немного поздно. Я использую прозрачный gif для источника '' –

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

У меня была аналогичная проблема, я обнаружил, что если изображение src не было одним из доступных в изображениях srcset, браузер загрузил бы изображение src независимо. Решение заключалось в том, чтобы убедиться, что URL-адрес изображения src соответствует одному из URL-адресов изображений srcset.

В стороне - как я понимаю, значение w, следующее за URL-адресом изображения, должно соответствовать (примерно) ширине изображения. Это позволяет браузеру наилучшим образом определять отображаемое изображение на основе атрибута sizes и плотности пикселей устройства. Таким образом, вы должны, вероятно, изменить значения w в своей разметке и добавить атрибут sizes (что позволяет браузеру знать размер рендеринга с использованием медиа-запросов и резервную ошибку, то есть (min-width: 640px) 600px, 50vw). Рассмотрим приведенный ниже пример:

<img src="img/picture-820x496.jpg" 
    srcset="img/picture-820x496.jpg 820w, 
    img/picture-707x428.jpg 707w, 
    img/picture-374x226.jpg 374w, 
    img/picture-305x185.jpg 305w" 
    sizes="100vw">

источник

2016-02-16 14:08:05 homerjam

Браузер загружает два изображения: один для srcset, один для src (Chrome 41 и др.)

ответ

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