Picturefill и lazyloading с lazysizes
Я пытаюсь получить ленивую загрузку с lazysizes и picturefill для работы.
Сама отложенная загрузка работает, если я просто использую базовое изображение:
<img class=lazyload data-srcset="http://placehold.it/301x301">
Если я проверяю вкладку сети в Chrome, я вижу, что изображение было загружено после красной линии, так что все в порядке:
Теперь я добавил<picture> элемент с моими адаптивными изображениями и попробуйте загрузить это также ленивый:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="http://placehold.it/1370x301 1x, http://placehold.it/2055x450 2x" media="(min-width: 1024px)" />
<source srcset="http://placehold.it/1023x300 1x, http://placehold.it/1534x450 2x" media="(min-width: 768px)" />
<source srcset="http://placehold.it/767x300 1x, http://placehold.it/1151x450 2x" media="(min-width: 384px)" />
<!--[if IE 9]></video><![endif]-->
<img
class="lazyload"
style="width: 100%; max-width: 100%;"
alt="Sample pic"
data-srcset="http://placehold.it/383x300 1x, http://placehold.it/575x450 2x"
/>
</picture>
К сожалению, это изображение не загружается, а загружается напрямую:
Я также попытался использовать только один src в изображении элемента изображения, но это не имеет значения.
Согласно документу lazysizes, это должно быть возможно сделать вместе, так что, я думаю, я просто упускаю небольшую деталь?
Обновление: Lazysizes и Picturefill загружаются в<head>.