maneira que informa as suas imagens para carga somente quando são necessários.

 

As imagens são a das coisas mais eficaz quando se trata de fazer o seu blog lento. E se você tem uma maneira que informa as suas imagens para carga somente quando são necessários? Quero dizer apenas quando os usuários vão realmente olhar para eles, mesmo depois de toda a página é carregada? Isso é chamado de "Lazy Loading" e pode ser facilmente alcançado usando um plugin jQuery grande.

Neste tutorial, vamos utilizar LazyLoad jQuery, um plugin maravilhoso que atrasos no carregamento de imagens (long páginas) na web. Imagens fora (parte visível da janela de exibição da página web) costuma ser carregado antes do usuário rola para eles.

Lazyloader é inspirado YUI ImageLoader Utility por Matt Mlinac. Página de demonstração está disponível.

Passo 1 - Instalar Biblioteca jQuery

Este plugin é baseado em jQuery, uma maravilhosa e muito útil biblioteca JavaScript que podem melhorar qualquer site em uma de muitas maneiras.

JQuery ter instalado em seu blog, basta colar o direito seguinte código antes da tag

</ head>:

  <! - Call jQuery -> 

  <Script src = 'Tipo http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' = 'text / javascript' /> 

  <! - End of Call jQuery -> 

Uma vez instalado, jQuery permite que você use muitos tipos de plugins, a maioria deles pode melhorar o seu site em uma maneira tão grande. Vamos ter mais tutoriais jQuery no futuro, e todos eles terão este passo.

Passo 2 - Instalar o Plugin LazyLoad

A próxima coisa que precisamos fazer é instalar o plugin LazyLoad no nosso blog, para fazê-lo, basta colar o direito seguinte código antes da tag </ head>:

  <! - LazyLoad -> 

  <Script src = 'Tipo http://dl.getdropbox.com/u/1693834/javascript/lazyload.js' = 'text / javascript' /> 
   
     <script type='text/javascript'> 
     Função $ (() ( 
     $ ( ". post img"). LazyLoad (( 
     espaço reservado: "http://i195.photobucket.com/albums/z105/dantearaujo/box.gif", 
     threshold: 200 
     )); 
     )); 
 </ Script>

  <! - End of LazyLoad -> 

Sensibilidade

Você pode configurar como perto da borda da imagem deve vir antes que ele seja carregado. Para fazer isto, modifique o valor limiar. Padrão é 0 (quando é visível).

  $ ( "Img"). LazyLoad (limiar (: 200)); 

Placeholder Image

Você também pode definir uma imagem de espaço reservado que terá lugar antes da imagem real não é totalmente carregada. Este espaço reservado deve ser um URL para uma imagem.

  $ ( "Img"). LazyLoad ((placeholder: "http://i195.photobucket.com/albums/z105/dantearaujo/box.gif")); 

Outros ajustamentos

A muitas outras maneiras de personalizar este modelo, só tenho falado sobre aqueles que realmente seria útil para melhorar o tempo de carregamento do seu blog. Para obter mais informações sobre como ajustar Lazyloader plugin para atender às suas necessidades, por favor, vá até o site.

Palavras finais

Este artigo é muito útil para aqueles que têm blogs muito tempo e precisa carregar um monte de imagens.Ter uma página da Web de carregamento rápido hoje em dia é a chave para o sucesso de blogs, principalmente do usuário ódio páginas lentas e eles certamente sair do seu blog quando eles vêem que está demorando demais para carregar

 

Technorati Marcas: maneira,que,informa,as,suas,imagens,para,carga,somente,quando,são,necessários