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.
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:
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.
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.
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!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non dui vel metus vestibulum bibendum. Maecenas ullamcorper eget nulla ac dapibus. Quisque pharetra ligula purus, a suscipit ex placerat dictum. Mauris non nulla sit amet ante facilisis pellentesque sed sed dui. Cras sagittis tincidunt felis, at ultrices justo dapibus vitae. Aliquam aliquam sodales metus.
Confira todos os posts
Você já deve ter percebido que a HostDime vive falando sobre nuvem, e não é só porque [...]
Ler mais
Cada vez mais tecnológica, a sociedade tem caminhado para gerações conectadas e [...]
Ler mais4007 2085
Capitais e regiões metropolitanas
0800 000 2085
Demais regiões
(+1) 407 756 1126
Chamadas internacionais
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:
