Compartilhar:

width=E não é que o nosso amigo jQuery está roubando a cena novamente? O desenvolvedor Mika Tuupola dedicou o seu tempo à produção de um plugin – que pode trabalhar com o WordPress ou qualquer tipo de site – que tem o objetivo de deixar o carregamento de imagens mais leve para o servidor e também para os usuários.
Com a utilização do jQuery, o plugin Lazy Load determina o carregamento das imagens apenas quando o usuário puder observá-las em seu navegador, proporcionando uma dupla redução: 1- No tempo de carregamento da página para o usuário final; 2- No consumo de recursos do servidor, principalmente do LOAD da máquina.

Como instalar o Lazy Load no meu WordPress?

A instalação no WordPress é muito facilitada, afinal basta a adição de um plugin à sua lista de add-ons! Para ajudar ainda mais, o desenvolvedor Andrew “Ayn” produziu um plugin especial para usuários do WP que faz todo o processo de instalação e ativação do plugin de forma automatizada. Vamos ao passo-a-passo:

  1. Acesse o painel do seu WordPress (/wp-admin) e faça login com seu usuário e senha
  2. Na aba “Plugins“, clique em “Adicionar novo“
  3. No campo de pesquisa, digite: jQuery Image Lazy Load WP
  4. Clique em “Instalar Agora” no plugin desenvolvido por Andrew Ng
  5. Após a instalação, faça a Ativação do plugin

Pronto, plugin instalado e ativado com sucesso. Agora, dê um refresh na sua página e veja que as imagens já começaram a ser carregadas com a função fade in do jQuery, tornando o seu carregamento mais rápido e utilizando menos recursos do servidor.

Como instalar o Lazy Load em um site que não usa WordPress?

O procedimento de configuração do Lazy Load também é facilitado para usuários que não utilizam o WordPress. Separamos um passo-a-passo com todas as configurações necessárias, confira:
Acesse a página de Mika Tuupola e faça o download do arquivo jquery.lazyload.js. Se você preferir, pode fazer o download por aqui (clique com o botão direito e em Salvar Como…).
Faça o upload deste arquivo para a pasta onde está localizado o seu site (por exemplo: /public_html/).
Antes de tudo, se você ainda não utiliza nenhum plugin em jQuery no seu website, é importante fazer a “chamada” dos códigos que compõem este maravilhoso sistema. Para isto, adicione estas linhas dentro do <head> </head> do seu site:
[code]<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>[/code]
Agora que o seu website já está com o código do jQuery sendo importado via Google, é necessário adicionar a execução do plugin Lazy Load. Faça isto através do seguinte código, também inserido no <head> do seu website:
[code]<script src="jquery.lazyload.js" type="text/javascript"></script>[/code]
Ok! Agora ambos os códigos estão sendo carregados, tanto as instruções do jQuery, quanto as instruções do plugin. No entanto ainda há a necessidade de inserção de um código em javascript fundamental para a execução dos comandos de carregamento da página. Adicione as linhas de códigos abaixo dentro do <head>:
[code]<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>[/code]
Este código fará com que todos os atributos “img”, ou seja, todas as imagens do seu site recebam a função “fadeIn” apenas quando o usuário executar a função .lazyload, que neste caso dá o comando para que a imagem seja carregada apenas quando ela aparecer na tela do usuário final.

Exemplos de Funcionamento

O Blog da HostDime Brasil já está fazendo o uso deste plugin. Você pode visualizá-lo em funcionamento no carregamento das imagens destacadas dos artigos, em nossa própria home. Outro exemplo pode ser visualizado nesta página.
Se você ficou com alguma dúvida, deixe o seu comentário que nós lhe ajudaremos!

< Voltar

#ConnectedHDBR

O que as últimas notícias do mercado financeiro, frases motivacionais, novas tecnologias e assuntos variados têm em comum? Os insights que compartilhamos em nossa news mensal, claro!

Receba esse material exclusivo em sua caixa de entrada:




    Podcasts