Meu blog técnico é bastante simples quando se trata de imagens, mas o blog de fotos em que estou trabalhando tem muitas delas (obviamente). Já vi alguns outros fotoblogs carregar preguiçosamente suas imagens para conservar largura de banda e também gostaria de adicionar esse recurso ao meu blog.
Eu encontrei este plugin do WordPress que faz o truque, mas quando olhei para o código, vi que ele estava forçando o jQuery 1.6.1 quando a versão mais recente do WordPress (3.3.1) vem com o jQuery 1.7.1. Também notei que a versão do plugin jQuery Lazy Load que envolve estava desatualizada – 1.5.0 vs. 1.7.1. (O plugin jQuery Lazy Load por acaso tem o mesmo número de versão que a versão do jQuery fornecida com o WordPress – muito confuso em geral.)
Como o plugin do WordPress já estava no GitHub , eu bifurquei o repositório com a intenção de atualizar o plugin. Achei que seria tão simples quanto remover a dependência codificada do jQuery 1.6.1 e atualizar a cópia incorporada do plug-in jQuery Lazy Load. Claro, não era tão simples.
As versões mais recentes do plugin jQuery Lazy Load requerem que você altere seu HTML, porque alguns “novos navegadores” (ainda não tenho certeza de quais – Safari? Ou todos os navegadores baseados em Webkit?) Irão carregar imagens mesmo se o atributo src for removido com JavaScript. Então, se sua imagem original fosse assim
<img src="/images/cat-picture.jpg">Você teria que alterar sua marcação para
<img src="/images/placeholder.png"
data-original="/images/cat-picture.jpg"
class="lazy">
<noscript><img src="/images/cat-picture.jpg"></noscript>Na <noscript>verdade, a parte é opcional, mas os navegadores com JavaScript desativado não carregam as imagens sem ele.
O plugin WordPress existente era essencialmente um shim para carregar o plugin jQuery Lazy Load. Para oferecer suporte à versão mais recente do plug-in jQuery Lazy Load, ele teria que se conectar a vários filtros do WordPress para modificar as <img>tags e adicionar as classes lazy e <noscript>fallbacks.
Depois de cerca de meia tarde mexendo, coloquei todas as peças no lugar e fiz o plugin atualizado funcionando no meu blog de fotos. O regex que estou usando pode ser um pouco estrito demais, mas no geral o plug-in é bom e independente. Ele adiciona todos os CSS e JS corretos em todos os lugares certos, então tudo que você precisa fazer é instalar e ativar o plug-in como antes. Se estiver interessado, você pode pegar o código atualizado em meu fork no GitHub. Eu também enviei uma solicitação de pull caso o autor original esteja interessado.
Esta dica foi republicada do meu blog, jontai.me