A imagem aparece de acordo com a rolagem - Blogger

Lazy Load é um plugin (Worpress) e um Script (Blogger) que é aumenta a velocidade de carregamento do blog usando um técnica simples, só carregar as imagens que estão visíveis ao leitor, ou seja, as imagens que estão no final da postagem não será carregada até que o leitor dessa a página para baixo.

Essa técnica funciona muito bem pois o tempo que levaria para carregar essas imagens que não estão visíveis para o leitor, com o tempo economizado outros elementos do blog são carregados, aumentando a velocidade do carregando.

Entre no painel do seu Blogger e do lado esquerdo clique em “Modelo”

Agora clique no botão “Editar HTML”  para acessar o código fonte do blogger.

Aperte “Ctrl +F” e pesquise por: </head>

ACIMA desse código que você encontrou, cole o script do Lazy Load que está abaixo

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/> <script type='text/javascript'> //<;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:'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTodnmf_YR04IqwlW01J0f3ld1Py7FHMkh6xte6ZViLdRdOXRcJKBv6o0qM_9-2e9qxDAoAklIlrZnLXcTCR9dq9ikitT7n-k5vxVtIfOo_WzydUrZBIrHiGNzea8vM0cj3oRzZyqRv5c/s1/gris.gif' }); }); //]]> </script>

Vai ficar assim, você encontra o </head> e ACIMA (onde é a seta na imagem)  cola o código do Lazy Load e depois clique em “Salvar modelo”

Este post foi escrito por: Matheus Ribeiro

Sou especialista em blogs e sites desde 2010, tento trazer conteúdos que os leitores procuram na internet.

• Tweet
• Share
• Share
• Share
• Share