Recentemente, experimentei atualizar a velha e boa tag IMG usando o componente da web para ‘ensinar’ a saber como analisar o atributo srcset.
Baixe aqui no Github
https://github.com/gogocat/Smart-img
Uso
Basta adicionar este script após jQuery.
<script src="dist/smartImg.js"></script>* Tag de imagem com is = “smart-img” *
src é opcional no padrão srcset, para evitar o carregamento de várias imagens, basta omiti-lo. O roteiro definirá os melhores candidatos como fonte final selecionada.
<img is="smart-img"
srcset="images/totoro.png, images/totoro2x320.png 320w, images/totoro2x360.png 360w, images/totoro2xiPad.png 768w"
width="209" height="308"
alt="Srcset image">Nota
A expressão regular srcset foi criada com base nas regras definidas na especificação srcset W3C:
http://www.w3.org/html/wg/drafts/srcset/w3c-srcset
Uma versão fácil de ler:
http://css-tricks.com/video-screencasts/133-figuring-responsive-images
Conforme a especificação atual do W3C indicada. Descritores de largura e descritores de densidade não se misturam.
“Se uma string candidata a imagem para um elemento de origem ou img tiver o descritor de largura especificado, todas as outras strings candidatas a imagem para esse elemento também devem ter o descritor de largura especificado.”
O script usará MutationObserver para monitorar o elemento smart-img adicionado futuro e a definição de srcset de análise automática.
Navegadores que não suportam MutationObserver usarão jQuery para ouvir o evento ‘DOMNodeInserted’.
O IE8, como de costume , não suporta o evento MutationObserver ou ‘DOMNodeInserted’ …
Eu não gosto de usar a pesquisa de base de tempo, então eu sugiro depois de um evento de sucesso de ajax, encontrar simples img [is = ‘smart-img ‘] nos novos dados e chamar cada prototype.createdCallback () da imagem
O construtor do componente da web será definido no namespace ” window.WC “.
O Chrome 34 ~ 37 já oferece suporte básico para srcset. Parece que só lê a definição de densidade.
Para ver se MutationObserver funciona, basta executar o exemplo e clicar no botão Adicionar nova imagem.
Testado
- IE8,9,10,11.
- cromada
- Raposa de fogo
- Sarfari
- Navegador Android
- Android Chrome
- Android Firefox
- iOS Safari