Carregar imagens de acordo com rolagem da página

Uma forma de  melhorar performance e reduzir o carregamento de um site com muitas imagens é fazer com que elas sejam carregadas de acordo com a necessidade  de visualização. Para isso foi criado o popular plugin de jQuery, o Lazy Load (que significa carregamento preguiçoso).

O plugin de jQuery Lazy Load é relativamente simples de instalar e nos permite carregar as imagens de acordo com o uso da barra de rolagem do navegador, evitando que sejam carregadas imagens que nem serão vistas.

Por poder acabar tendo que fazer com que o usuário aguarde novos carregamentos várias vezes, use com cuidado. A indicação é para sites mobile (que temos sempre que considerar a falta de velocidade na conexão e custo do uso de dados da internet  móvel) e sites com extensa lista de imagens na mesma página (como os que possuem scroll infinito ou apenas uma página pro site todo).

Como usar

Sendo um plugin de jQuery, é necessário instalá-lo. Inclua os dois no header do seu HTML:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

Devemos alterar o HTML da tag img para usá-lo. Usamos uma imagem padrão que será carregada antes da imagem original no atributo src e o endereço da imagem real no atributo data-original. Uma boa ideia é também atribuir uma classe .lazy apenas às imagens que utilizará, para podermos ter controle específico sobre elas.

É necessário configurar a largura e altura da imagem nos atributos ou no CSS para funcionar corretamente.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

Depois , no código javascript inicialize o lazyload nas imagens com classe .lazy:

$("img.lazy").lazyload();

Fallback para navegadores sem javascript

Mesmo que quase todos tenham javascript habilitado, basta adicionarmos a imagem no entre as tags noscript para exibir a imagem normal.

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" heigh="480">
<noscript><img src="img/example.jpg" width="640" heigh="480"></noscript>

Para prevenir a exibição da imagem padrão e da real, esconda a padrão com CSS:

.lazy {
  display: none;
}

Então, para os navegadores com javascript habilitado, você deve reforçar que as imagens demonstrativas serão exibidas, usando o seguinte código que também faz o carregamento do plugin:

$("img.lazy").show().lazyload();

 

Mais informações no site oficial doplugin de jQuery Lazy Load.

[crp]