JScript

Programação & Desenvolvimento


Você não está conectado. Conecte-se ou registre-se

JScript »  Forumeiros (Avançado) » Ajuda & Suporte » Pedido - Código de Carregamento

Pedido - Código de Carregamento

2 participantes

Ir para baixo  Mensagem [Página 1 de 1]

1Pedido - Código de Carregamento Empty Pedido - Código de Carregamento Sex 13 Set 2013, 2:17 pm

Convidado

avatar
Convidado

Olá,

Desejava este efeito de carregamento do fórum:

Pedido - Código de Carregamento 2_bmp16


www.suportedesign.net || PunBB

2Pedido - Código de Carregamento Empty Re: Pedido - Código de Carregamento Sex 13 Set 2013, 2:54 pm

Legolas

Legolas
Moderadores
Moderadores

Adicione esse código no seu template overall_header, antes do </head>

Código:
<script>jQuery(function() {
      jQuery('body').prepend('<div id="ajax_loading" style=""><img src="http://i.imgur.com/gygr8wi.gif" alt="Loading..."></div>');
      jQuery('a').click(function() {
          jQuery('#ajax_loading').slideDown();
          setTimeout('load()', 10000);
      });
    });
    function load() {
      jQuery('#ajax_loading').slideUp('2000');
    }
    setTimeout('load()', 10000);</script>

<style>#ajax_loading {background: #000;color: #fff;text-align: center;padding: 5px 0 8px;width: 8%;top: 0px;left: 46%;-moz-border-radius: 0 0 5px 5px;-webkit-border-bottom-right-radius: 5px;-webkit-border-bottom-left-radius: 5px;border-radius: 0 0 5px 5px;z-index: 999;position: fixed;-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);box-shadow: 0px 3px 5px rgba(0,0,0,0.2);opacity: 0.6;}</style>

http://aden.rpgwars.net

3Pedido - Código de Carregamento Empty Re: Pedido - Código de Carregamento Sex 13 Set 2013, 3:00 pm

Convidado

avatar
Convidado

Resolvido obrigado !

4Pedido - Código de Carregamento Empty Re: Pedido - Código de Carregamento Sex 13 Set 2013, 4:00 pm

Legolas

Legolas
Moderadores
Moderadores

Que tal nos ajudar a organizar o fórum e clicar em Resolvido? Se quiser também em Curtir Wink

http://aden.rpgwars.net

5Pedido - Código de Carregamento Empty Re: Pedido - Código de Carregamento Sex 13 Set 2013, 5:25 pm

JScript

JScript
Administradores
Administradores

Eu fiz de outra forma, até mais rápida e com resultados mais "reais" pois aparece assim que o HTML é interpretado e desaparece quando a página é completamente carregada, veja:

No template Overall_header dentro da tag <body>, mas especificamente: abaixo da tag como primeiro item:
Código:

    <div id="ajax_loading" style="display: ;">
        <img width='43' height='11' alt='Carregando...' src='data:image/gif;base64,R0lGODlhKwALAPEBALrQgv///3umDQAAACH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQFCgABACwAAAAAKwALAAACMgyOGMuW2diD88UKG95W88uF4DaGWFmhZid93pq+pwxnLUnXh8ou+sSz+T64ICAyTBUAACH5BAUKAAAALAAAAAALAAsAAAIMRI5oye0Po5yULgcKACH5BAUKAAIALAAAAAAbAAsAAAIrFI4oyxIPoUkUNBdzqPTqzCXeB4VKQ5amhabbOqYry7ivGZNz/k3ctUgJCgAh+QQFCgACACwQAAAAGwALAAACKxSOKMsSD6FJFDQXc6j06swl3geFSkOWpoWm2zqmK8u4rxmTc/5N3LVICQoAOw=='>
    </div>
Note que a imagem faz parte do HTML, não fazendo uma nova requisição pra carregá-la!

O código abaixo é no mesmo template, mas dentro da tag <head>:
Código:

        $(window).load(function() {
            $('#ajax_loading').hide();
        });
O CSS é o mesmo postado acima!

Explicação:
A diferença deste código para o que o @Legolas postou é que não precisa clicar em links para ter o efeito!

JS

http://autoitbrasil.com

6Pedido - Código de Carregamento Empty Re: Pedido - Código de Carregamento Sex 13 Set 2013, 5:27 pm

Convidado

avatar
Convidado

Olá,

Por acaso tem um aspecto muito agradável obrigado !

Conteúdo patrocinado



Ir para o topo  Mensagem [Página 1 de 1]

JScript »  Forumeiros (Avançado) » Ajuda & Suporte » Pedido - Código de Carregamento

Permissões neste sub-fórum
Não podes responder a tópicos