Como fazer loading em conteúdos do site

Quando o assunto é desenvolvimento web, os visitantes de sites não têm muita paciência para esperar… Estudos mostram que se o site não apresentar algum feedback (mostrar alguns elementos/conteúdos) em poucos segundos, a pessoa desiste de esperar e abandona o site – com grandes probabilidades de não mais retornar.

Uma das funções mais interessantes é apresentar um loading (vulgo “carregamento”) indicando quantos por cento (%) do site estão carregados e o que ainda falta, mostrando para o visitante este feedback que ele precisa para ter certeza de que “coisas” estão acontecendo.

Depois do advento do AJAX, nos anos 90 do século passado, e surgimento de muitos bons frameworks para front-end depois disso, tais como jQuery, os programadores contamos com excelentes ferramentas e recursos para acelerar o carregamento e melhorar a performance de sites, sendo possível realizar funções, efeitos e interações que, pouco tempo atrás, não eram sequer imaginadas.

Uma das interações é fazer loading em conteúdos do site, ou, mesmo, em páginas inteiras do site, e uma das maneias de se fazer isso é usando o plugin para jQuery jLoader.

jLoader: dinâmica

É possível ver no site oficial do jLoad que está licenciado sob a GNU GPL v3, então seu uso é grátis e pode ser feito sem maiores complicações.

O que o plugin permite é mostrar uma barra de carregamento para elementos específicos da página (lembrando que “body” também é um elemento da página). Quer dizer, é possível tanto carregar elementos específicos da página (e o jLoader permite fazer múltiplos carregamentos simultâneos), quanto carregar a página inteira, colocando o loader no documento inteiro.

Algumas das características do jLoader são:

• Múltiplos loadings simultâneos na mesma página
• Acompanha redimensionamento da janela
• Se o elemento-alvo tiver imagem de background ou for uma imagem, isso é levado em consideração
• Função para interromper loadings em triggers de eventos
• Dentre outros

jLoader: funcionamento

O plugin é leve (8KB) e conta com somente 1 arquivo (nada de CSS externo). Como citado, é possível fazer carregamento para vários elementos da página ao mesmo tempo; para cada um deles, o método construtor pode receber argumentos de personalização:

• overlayColor. Hexadecimal da cor de background do loading (padrão “#000″).
• userCallback. Função para quando o carregamento termina (padrão “null”).
• showProgress. Se a barra de loading vai ou não aparecer (padrão “false”).
• showProgressText. Se o número da porcentagem vai ou não aparecer (padrão “false”).
• progressColor. Hexadecimal para a cor da barra de progresso (padrão “#FFF”).
• textColor. Hexadecimal para a cor dos números da porcentagem (padrão “#FFF”).
• textSize. Tamanho do texto para os números da porcentagem (padrão “15″).
• loaderPosition. Reposiciona o loader no overlay; por padrão é centalizado (usa-se “loaderPosition:{top:y,left:x}”).

Não são tantas opções, assim, mas já dá para fazer um nível de personalização bem interessante. Vamos ver em alguns exemplos.

jLoader: exemplo 1

Como primeiro exemplo, vamos imaginar que queremos fazer loading em um elemento de id “escopo”, mostrando a barra de progresso e o texto da porcentagem de carregamento com texto 20 e, após o fim do carregamento, dar o trigger para a função showContent().

1
2
3
4
5
6
7
8
9
10
11
12

jQuery(document).ready(function($){
    var loader = new Loader('#escopo',
        {
	    showProgress:true,
	    showProgressText:true,
	    textSize:20,
	    userCallback:showContent
	}
    );
 
    loader.Start();
});

jLoader: exemplo 2

Loadin no elemento de id “noticias”, com fundo “#0B274C” e cor da barra de carregamento “#F6911E”.

1
2
3
4
5
6
7
8
9
10
11
12

jQuery(document).ready(function($){
    var loader = new Loader('#noticias',
	{
	    showProgress:true,
	    showProgressText:true,
	    overlayColor:'#0B274C',
	    progressColor:'#F6911E'
	}
    );
 
    loader.Start();
});

jLoader: exemplo 3

Loading o site inteiro, com todas as configurações padrão, exceto o tamanho do texto, que será “10″.

1
2
3
4
5
6
7
8
9

jQuery(document).ready(function($){
    var loader = new Loader('body',
	{
	    textSize:10
	}
    );
 
    loader.Start();
});

Outras customizações

Estamos falando de arquivos javascript, meus amigos, e, mesmo que não haja uma função pré-definida e/ou você queira fazer ajustes mais “pesados”, diretamente no core do plugin, basta abrir o arquivo que você baixou e realizar as mudanças que quiser…

Por exemplo, se quiser aumentar a espessura da barra de loading (que, por padrão, é de 1px), simplesmente abro o arquivo, procura o trecho de código que especifica essa características (na atual versão do jLoader, a 1.1.1, esta característica está na linha 139 do arquivo jLoader.js).

Assim como foi explicado no artigo sobre criação de URLs amigáveis com slugs, o mesmo vale para qualquer script pronto: basta abrir, estudar e fazer as modificações que cabem ao projeto/resultado pretendido.

Conclusão

Certamente, uma das maiores questões de muitos desenvolvedores é como fazer loading no site. Usando o jLoader, isto está resolvido.

Mas, atenção: não é só porque existe o recurso de carregamento, que este deve ser usado em todo e qualquer elemento de todos os sites do mundo… Há que se levar em consideração o escopo do projeto e se, realmente, existe a necessidade e/ou conveniência em usar o recurso.

Se realmente for necessário, use o jLoader para fazer loadings de elementos no site (ou páginas completas) e desfrute das facilidades de fazer isso de forma tão simples, aumentando a boa experiência que os visitantes terão!