Acelere o carregamento do blog com Lazy Load

Lazy Load é um script jQuery que ajuda a acelerar o carregamento do blog

Lazy Load é um script jQuery que ajuda a acelerar o carregamento do blog quando ele usa muitas imagens, isso ocorre porque o script pára o carregamento das imagens, ou seja, coloca os em modo de espera para que primeiro carreguem os outros elementos, e conforme se baixe o scroll da página as imagens irão aparecendo.

Siga o @bloggermin agora e fique por dentro das novidades para o seu blog. E curta nossa página no Facebook.



Isto implica uma melhoria de velocidade no carregamento do blog, especialmente quando nele há imagens grandes ou uma quantidade significativa de imagens.

Além disso, usaremos o efeito FadeIn de modo que as imagens apareçam em forma de desvanecimento.

Você pode ver um exemplo neste blog teste, se você baixar o scroll pouco a pouco verá como as imagens irão aparecendo.

A instalação é tão simples que exige apenas uma etapa, e evitamos hospedar o script em um servidor, porque o que nos interessa é a velocidade, alojaremos o script diretamente no modelo.

Para colocar Lazy Load em seu blog entre no Editar HTML do modelo e antes de </head> cole o script:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
/*
* Lazy Load - jQuery plugin for lazy loading images
* Copyright (c) 2007-2012 Mika Tuupola
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
* Project home:
* http://www.appelsiini.net/projects/lazyload
*/
(function($){$.fn.lazyload=function(options){var settings={threshold:0,failurelimit:0,event:"scroll",effect:"show",container:window};if(options){$.extend(settings,options);}
var elements=this;if("scroll"==settings.event){$(settings.container).bind("scroll",function(event){var counter=0;elements.each(function(){if($.abovethetop(this,settings)||$.leftofbegin(this,settings)){}else if(!$.belowthefold(this,settings)&&!$.rightoffold(this,settings)){$(this).trigger("appear");}else{if(counter++>settings.failurelimit){return false;}}});var temp=$.grep(elements,function(element){return!element.loaded;});elements=$(temp);});}
this.each(function(){var self=this;if(undefined==$(self).attr("original")){$(self).attr("original",$(self).attr("src"));}
if("scroll"!=settings.event||undefined==$(self).attr("src")||settings.placeholder==$(self).attr("src")||($.abovethetop(self,settings)||$.leftofbegin(self,settings)||$.belowthefold(self,settings)||$.rightoffold(self,settings))){if(settings.placeholder){$(self).attr("src",settings.placeholder);}else{$(self).removeAttr("src");}
self.loaded=false;}else{self.loaded=true;}
$(self).one("appear",function(){if(!this.loaded){$("<img />").bind("load",function(){$(self).hide().attr("src",$(self).attr("original"))
[settings.effect](settings.effectspeed);self.loaded=true;}).attr("src",$(self).attr("original"));};});if("scroll"!=settings.event){$(self).bind(settings.event,function(event){if(!self.loaded){$(self).trigger("appear");}});}});$(settings.container).trigger(settings.event);return this;};$.belowthefold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).height()+$(window).scrollTop();}else{var fold=$(settings.container).offset().top+$(settings.container).height();}
return fold<=$(element).offset().top-settings.threshold;};$.rightoffold=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).width()+$(window).scrollLeft();}else{var fold=$(settings.container).offset().left+$(settings.container).width();}
return fold<=$(element).offset().left-settings.threshold;};$.abovethetop=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollTop();}else{var fold=$(settings.container).offset().top;}
return fold>=$(element).offset().top+settings.threshold+$(element).height();};$.leftofbegin=function(element,settings){if(settings.container===undefined||settings.container===window){var fold=$(window).scrollLeft();}else{var fold=$(settings.container).offset().left;}
return fold>=$(element).offset().left+settings.threshold+$(element).width();};$.extend($.expr[':'],{"below-the-fold":"$.belowthefold(a, {threshold : 0, container: window})","above-the-fold":"!$.belowthefold(a, {threshold : 0, container: window})","right-of-fold":"$.rightoffold(a, {threshold : 0, container: window})","left-of-fold":"!$.rightoffold(a, {threshold : 0, container: window})"});})(jQuery);

$(document).ready(function($){
$('img').lazyload({
effect:'fadeIn',
placeholder:'http://lh6.googleusercontent.com/-p9tA2JG1mu8/T5Y_yu2lQdI/AAAAAAAACao/JckgkvE3E_8/s1/gris.gif'
});
});
//]]>
</script>
Salve as alterações e pronto.
Se você já usar jQuery utilize apenas a versão mais atual.

Como você pode ver o script não é tão extenso em comparação com outros que utilizamos com freqüência, ele acelera o carregamento do blog e também exibe as imagens com efeito de desvanecimento. 
No entanto, somente é recomendado para uso quando o blog contém muitas imagens, caso contrário não adianta encher o blog com outro script, pois não irá representar uma melhoria substancial nem no tempo de carregamento e nem no tamanho da página.

COMENTÁRIOS

BLOGGER: 8
Loading...
Nome

Básicos,3,Blogger,43,Botões,2,buscadores,3,Comentários,5,Css3,9,Design,3,Dominio,3,Downloads,2,Efeito,13,Facebook,3,Feed,1,Festividades,1,GooglePlus,6,Hacks,7,HTML,8,Imagens,8,Menu,3,Recursos,3,Seo,8,Truque,24,Twitter,2,Widget - Gadget,16,
ltr
item
Bloggermin: Acelere o carregamento do blog com Lazy Load
Acelere o carregamento do blog com Lazy Load
Lazy Load é um script jQuery que ajuda a acelerar o carregamento do blog
http://3.bp.blogspot.com/-cmHPuKn_S9A/T9DcwXB0j6I/AAAAAAAAAa0/9T68chFkryE/s1600/Lazy-Simpsonso.png
http://3.bp.blogspot.com/-cmHPuKn_S9A/T9DcwXB0j6I/AAAAAAAAAa0/9T68chFkryE/s72-c/Lazy-Simpsonso.png
Bloggermin
https://www.bloggermin.cashmore.com.br/2012/04/acelere-o-carregamento-do-blog-com-lazy.html
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/
https://www.bloggermin.cashmore.com.br/2012/04/acelere-o-carregamento-do-blog-com-lazy.html
true
3085171147808187471
UTF-8
Carregado Todas os Posts. Não foi encontrado nenhum post. VER TUDO Leia mais Responder Cancelar resposta Excluir Por Home PÁGINAS POSTAGENS Ver tudo RECOMENDADO PARA VOCÊ ETIQUETA ARQUIVO PESQUISAR TODAS AS PUBLICAÇÕES Não foi encontrado qualquer correspondência postal com o seu pedido Voltar a Home Domingo Segunda-feira Terça-feira Quarta-feira Quinta-feira Sexta-feira Sábado Dom Seg Ter Qua Qui Sex Sáb Janeiro Fevereiro Março Abril Maio Junho Julho Agosto Setembro Outubro Novembro Dezembro Jan Fev Mar Abr Maio Jun Jul Ago Set Out Nov Dez agora mesmo 1 minuto atrás $$1$$ minutes ago 1 hora atrás $$1$$ hours ago Ontem $$1$$ days ago $$1$$ weeks ago mais de 5 semanas atrás Seguidores Seguir O CONTEÚDO É PREMIUM Por favor, compartilhe para desbloquear Copiar Todo o Código Selecionar Todo o Código Todos os códigos foram copiados para a área de transferência Não é possível copiar os códigos / textos, por favor pressione [CTRL] + [C] (ou CMD + C com Mac) para copiar