WebpAlt troca as imagens no formato WEBP por imagens alternativas definidas por você quando o navegador não suportar o formato.
Compare abrir em diversos navegadores (inclusive o Safari) e inspecione os elementos de imagem.
Este projeto oferece uma solução simples para websites que possuem imagens no formato WEBP e tem dificuldades em serem carregados em navegadores sem suporte à extensão (ex. Safari).
Com ele você consegue definir imagens alternativas para serem carregadas sempre o navegador do visitante não oferecer suporte a extensão WEBP
- Jquery
- Navegador com suporte a javascript
Chame o script entre as tags <head></head> ou antes de fechar a tag </body>, é importante que ele seja carregado após o JQuery:
<script src="jquery.min.js"></script>
<script src="jquery.webpalt.min.js"></script>Você também pode carregar o plugin via CDN:
<script src="//cdn.jsdelivr.net/gh/usedigital/webpalt/jquery.webpalt.js"></script>Agora inicie o plugin em uma tag ou seletor de sua preferência:
<script>
$(function(){
$("img").WebpAlt();
});
</script>Por padrão, caso a fonte da imagem esteja no formato WEBP, o plugin irá procurar no elemento o atributo data-altsrc como fonte alternativa para a imagem, caso ele não esteja definido no DOM ele irá editar o URL a imagem e alterar a extensão final para uma extensão que pode ser definia nas configurações do plugin.
O plugin utiliza um pacote do modernizr par adectar a compatibilidade do navegador com o formato WEBP, esse pacote já está incluso no código fonte do plugin e contem apenas a extensão do modernizr necessária para esta detecção, evitando códigos desnecessários em seu site.
Existem algumas opções que você pode alterar para adaptar o comportamento do plugin para as suas necessidades:
| Opção | Tipo | Valor Padrão | Descrição |
|---|---|---|---|
| altExtension | string | .png |
Extensão alternativa padrão. Pode ser definina individualmente no elemento com o atributo data-altext |
| altSrcData | string | altsrc |
Atributo "data" que contem a URL da imagem alternativa para ser carregada no lugar do WEBP, caso não esteja definido no elemento, a URL do WEBP será utilizada como base para a URL alternativa sendo alterada apenas a extensão |
| defaultSrcAttr | string | src |
Attributo que contém a referência ao WEBP, pode ser alterado caso utilize algum script de LazyLoad (data-src). |
| afterItem | function | function (item){ }; |
Funcão que será executada após o processamento individual de cada item, retorna o item processado como parâmetro. |
| afterAll | function | function (itens){ }; |
Funcão que será executada após o processamento geral, retorna o array de itens referentas ao seletor do plugin. |
O plugin contém duas funções de callback que serão envocadas após o processamento individual de cada item e após o processamento completo. Você pode utilizá-los para fazer com que o plugin trabalhe juntamente com outros plugins relacionados a imgens.
<script src="jquery.min.js"></script>
<script src="jquery.webpalt.min.js"></script>
<script src="jquery.lazy/jquery.lazy.min.js"></script>
<script src="jquery.lazy/jquery.lazy.plugins.min.js"></script>
<script>
$(function(){
$("img").WebpAlt({
defaultSrcAttr : "data-src", //Define o atributo de referência do WEBP como data-src (padrão do JQuery LazyLoad).
afterAll : function(itens){
//Executa o LazyLoad após o processamento das imagens
$("img").lazy();
}
});
});
</script>- Reconhecer também imagens de fundo definidas por CSS.
Este pacote é um software gratuito distribuído sob os termos da licença MIT.
Use Digital © Script desenvolvido por Renalcio Carlos Jr.