Lazy loading de imagens com jQuery

Uma característica muito importante de um site é, definitivamente, a velocidade de carregamento de suas páginas. Apesar de um site lento, que leva muito tempo para nos mostrar o que queremos, de fato, a maioria dos usuários fecha a página, a mudança para um local alternativo ou concorrente. Internet não é uma ferramenta para o paciente as pessoas ;-)

A técnica de Lazy Loading (traduzido para "lazy loading") de imagens é justamente para evitar longas esperas e desnecessários dentro de uma página web. Esta técnica de programação não é, de fato, referindo-se imagens, mas abrange todos os recursos "inútil", quando ele carrega, riorse que irá, naturalmente, recuperados "on demand" quando há uma necessidade.

Enfrentaremos o discurso de imagens como elas são, essencialmente, a parte mais pesada de uma página web. O usuário inicia uma página não é necessariamente vai ver todas as imagens, talvez porque eles estão escondidos ou simplesmente porque colocou na parte inferior ou em uma área distante de onde o usuário quer acessar à informação.
Tais situações ocorrem especialmente para páginas muito grandes, como podem ser os do blog (que, na acusação de muitos comentários, pode ser muito longo). Em circunstâncias como essa não faz sentido para carregar todas as imagens de inicialização, especialmente aqueles localizados na parte inferior porque nunca pode ser visto!

Para implementar a técnica de carregamento lento pode ser implementado de diferentes maneiras.
A mais óbvia que vem à mente é a de remover as imagens em tempo real a partir do DOM usando JavaScript. Mas isso também seria errado, porque a forma como a maioria dos navegadores, no entanto, apresentou o pedido e não a imagem que se obtém o efeito completo que você deseja.
Uma boa técnica, destaque no artigo de Paul Hammond Speed ​​Up Your Site com conteúdo atraso é, em vez disso, usar os atributos personalizados em HTML5. Vamos ver como.

• <<
• 1
• 2
• 3
• >>