Principal » blogs » blog do(a) Pedro Faria

Criando "Loading..." com jQuery

JavaScript
Enviado por Pedro Faria em Qui, 16/11/2006 - 13:28.JavaScript

Estes dias precisei criar aquele "Loading...", tipo o do gmail, para um site que estou terminando... dae como eu estou usando o jQuery nele ficou mais fácil ainda...

Vou mostrar pass-a-passo como criar o seu! mas só vai funcionar se você estiver usando o ajax do próprio jQuery...

Primeiro crie o html do "loading..." da forma que você quer apresentar... por exemplo:

  1. <div id="loading">Loading...</div> 

Após feito isso, defina o style e posição do objeto da forma que quiser e lembre-se de colocar a div invisível. Pode ser via CSS ou colocando no parâmetro style da tag div. Vou exemplificar via CSS:

  1. #loading {
  2.   float: right;
  3.   font-size: 10px;
  4.   margin-right: 10px;
  5.   display:none;
  6. }

Agora só falta fazer com que o "loading..." apareça e desapareça conforme as ações do jquery... para isso, vamos usar o bind ajaxStart e ajaxStop. Ambos recebem uma função como parâmetro. Na função coloque para aparecer ou desaparecer conforme o bind... vai ficar assim:

  1. $(document).ready(function() {
  2.  
  3.   $().ajaxStart(function() { $('#loading').show(); });
  4.   $().ajaxStop(function() { $('#loading').hide(); });
  5.  
  6. });

Viu com o é simples?

Até a próxima...

blog do(a) Pedro Faria | adicionar comentário | 27287 visualizações


...
Enviado por JunioR (não verificado(a)) em Sex, 17/11/2006 - 08:20.

É, o jQuery impressiona mesmo. Faz algum tempo que comecei a trabalhar com ele. A propósito, foi depois de ter lido um post sobre ele aqui. :)

Bom, como precisei criar um loading nos sistemas da empresa. Aqui vai a classe js para criação.

var loading = {
start: function(p) {
var getDoc = (p) ? parent.document : document ;
var load = getDoc.createElement('div') ;

$(load)
.attr('id','__xLoading')
.css({
position: "absolute",
background : "#DF0000",
color: "#fff",
padding: "3px",
width: "80px",
top: "0",
right: "0"
})
.html('Aguarde...');

$(getDoc.body).prepend(load);
},
stop: function(p) {
var getDoc = (p) ? parent.document : document ;
$(getDoc.getElementById('__xLoading')).remove();
}
}

[s]

JunioR

responder
Usar essa classe do Junior
Enviado por ferdinando (não verificado(a)) em Qua, 09/01/2008 - 13:20.

Nao sei se devo perguntar aqui, mais Junior, a minha ignorancia nao deixar usar essa classe, eh pelo jeito tem muita utilidade pra mim, poderia dar um exemplo de como usa-la, por favor???

responder
Agradeço pelo post me foi
Enviado por battisti (não verificado(a)) em Ter, 30/12/2008 - 17:51.

Agradeço pelo post me foi de grande valia!

responder
Dúvidas
Enviado por Fernando (não verificado(a)) em Qua, 02/09/2009 - 16:29.

Cara tem como travar/definir essas funções somente para alguns load.. pq assim eu tenho algumas coisas que carregam via load de um em um segundo e dai se ficar aparecendo o loading a cada segundo incomoda então queria que só em alguns loads essa função funcionasse, é possível!

responder
Um if resolve! if (this.id
Enviado por Pedro Faria em Seg, 14/09/2009 - 16:40.

Um if resolve!

if (this.id == 'lalala') return;

responder