Picturefill e lazyloading com lazysizes
Estou tentando fazer o carregamento lento com lazysizes e o preenchimento de fotos funcionar.
O próprio lazyloading funciona se eu apenas usar uma imagem básica:
<img class=lazyload data-srcset="http://placehold.it/301x301">
Se eu verificar a guia de rede no chrome, posso ver que a imagem foi carregada após a linha vermelha, então está tudo bem:
Agora eu adicionei um<picture> elemento com minhas imagens responsivas e tente carregar isso também preguiçoso:
<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>
Infelizmente, esta imagem não é carregada com preguiça, mas carregada diretamente:
Também tentei usar apenas um src na imagem do elemento picture, mas isso não faz diferença.
De acordo com o documento de lazysizes, deve ser possível fazer isso funcionar em conjunto, então acho que estou perdendo apenas um pequeno detalhe?
Atualização: Lazysizes e Picturefill são carregados no diretório<head>.