Lazy Load: Acelere o carregamento do seu blog

   Olá caros leitores, hoje estou aqui com mais um tutorial, mais desta vez destinado ao Blogger e Wordpress, apresentando uma ferramenta que também pode prestar em outras plataformas como as citadas. Apresentado a vocês o Lazy Load, um script que deixa o carregamento do site mais rápido, deixando as imagens por segundo plano.

   O Lazy Load, facilita o carregamento deixando as imagens do blog por segundo plano, substituindo por X imagem ou cor.

Instalando no Wordpress

   Eu não tenho muito conhecimento no Wordpress, mais consegui "descolar" essa parte estudando um pouco sobre plugins no Wordpress.

   Caso você saiba já como instalar, já pode ir para a segunda etapa, caso o contrário confira este tutorial:

Como baixar e instalar plugins no Wordpress -
migre.me/a4T8T

  • Após entrar no Diretório de Plugins;
  • Procure por: Lazy Load;
  • Clique no primeiro plugin e instale;
  • Após ative e pronto.

Instalando no Blogger

 
   Bem diferente de instalar no Wordpress, é necessário mexer no Código de Fonte do seu blog, e por este motivo aconselho a você a testar em um blog de teste ou fazer um backup,

Bem, já foi dado o conselho, agora querido leitor vamos colocar as mãos nas teclas.

  • Acesse o Blogger e faça seu login;
  • Após acesse a página Modelo, 
  • Clique agora em: "Editar HTML";
  • Agora marque a opção "Expandir Modelos Widgets";
  • E procure por: 
</head>
  • E acima cole o seguinte código:

    <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 e pronto.
  Agora o código foi adicionado em todo o seu blog.

Fonte: Bloggermin