< Somenekers />
Developers Team




> >

Carregamento Assíncrono de Imagens - Otimizção de Sites

Publicado em: /



Colocar arquivos JavaScript espalhados no meio do HTML é uma péssima prática há anos. A boa prática é sempre jogar para antes do final do . Mas será que jogar o JavaScript para o fim da página é suficiente?

Além de JavaScripts assíncronos, é possível melhorar bastante a performance deixando para carregar certos componentes mais tarde, apenas quando necessários como imagens secundárias. 

Veja abaixo um exemplo de como podemos carregar algumas imagens após o carregamento da página, as Tags apenas declaram os caminhos em atributos data- que não são interpretados pelo navegador. Uma função JavaScript pode, então, ler esses valores e gerar as tags de forma assíncrona, depois que a página foi carregada.

<span class="imgLoad" data-width="640" data-height="480" data-title="Otimização de Sites" data-imgSrc="http://www.somenek.com.br/fx-template/logo.jpg">



Veja agora o script:
$(function() {
  setTimeout(function(){
    $('span.imgLoad').each(function()
    {
      var src = $(this).attr('data-imgSrc');
      var width = $(this).attr('data-width');
      var height = $(this).attr('data-height');
      var title = $(this).attr('data-title');
      var objX = $(this).closest("figure");
      $(this).after('<img src="'+src+'" title="'+title+'" width="'+width+'" height="'+height+'" />');
      $(this).remove();
    });
  }, 800);
});



Clique abaixo para dar sua nota no artigo e compartilhar!


Rating: 3.8/5 (4 votos)




comments powered by Disqus