Imagem de carregamento

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Imagem de carregamento

Mensagem por Bookmarlucas654 em 24/01/12, 02:28 pm

Qual é minha questão:
Eu gostaria de fazer com que aparecesse uma imagem enquanto a página carrega, que era esta imagem aqui:



Tem algum CSS ou HTML para fazer isto?

Medidas que eu tomei para corrigir o problema:
Vir aqui!

Imagens do meu problema:
http://www.habbid.com.br/images/loadingAnimation.gif

Endereço do meu fórum:
http://habbojoy.forumeiros.com/

Versão do meu fórum:
PHPBB3
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Resolvido Re: Imagem de carregamento

Mensagem por Ace em 24/01/12, 02:32 pm

Olá,

Leia o conteúdo do spoiler abaixo:

Spoiler:


Função de carregamento em páginas


Em sites com toques profissionais encontramos scripts interessantes de quando clicamos em um link que redireciona para outra página emite um efeito "carregando". Neste tutorial vamos usar um efeito Jquery especial que vai reproduzir este efeito.


--> Tutoriais, dicas e astúcias <--
Função de carregamento em páginas



- Noção da função páginas javascript:
Para que seja possível proceguir é importante que saiba que precisamos ter conhecimento básico sobre a função Página javascript que temos em nosso painel de controle.

Painel de controle >> Módulos >> HTML & JavaScript >> Gestão dos códigos JavaScripts >>

Seta Título - Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta Localização - São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. Pode ser na galeria, nos fóruns ou sub-fóruns. Vamos ver algumas opções:
No índice : O código será aplicado ao índice do fórum.
No portal : O código será aplicado ao Portal do fórum.
Nos sub-fóruns (Fóruns) : O código será aplicado nos Fóruns e Sub-fóruns.
Sobre os temas : O código será aplicado aos tópicos do fórum.
Na galeria : O código será aplicado na sua Galeria de imagens.
Em todas as páginas : O código será aplicado em todas as páginas do fórum.
Seta Código JavaScript - Campo destinado para receber os códigos JavaScript e jQuery.
Seta Habilitar o gerenciamento dos códigos JavaScript - Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.
Clique no botão "Criar um novo javascript" para passar-mos para o próximo passo.

- Modificações no código Jquery exebido:
Com a página de javascript aberta em seu painel de controle, teremos que adicionar um Jquery ao qual fará com que uma imagem seja exibida a cada carregamento de página, caso não tenha compreendido explicaremos logo mais nas questões no fim deste tutorial.
Em 'Investimento', marque para o efeito ser reproduzido "Em todas as páginas".
;jQuery(document).ready(function(){jQuery('body').before('<div class=pagcarreg style="text-align:center"><style>html{background-image:url(IMAGEM_DE_FUNDO)}</style><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><img src="IMAGEM_DE_CARREGAMENTO" border=0></div>');jQuery('body').hide()});window.onload=function(){jQuery('body').show();jQuery('.pagcarreg').remove()};
Depois de personalizar como desejar, basta confirmar a nova página .JS e verificar o resultado no fórum na transferencia de uma página para outra.

Se precisar de imagens para o carregamento, você poderá buscar imagens no Google Imagens com o título "Carregamento.gif". Se preferir, Forumeiros tem imgens de carregamento, mas para obter basta copiar o endereço no seguinte tutorial: Script de carregamento.

  • É possível ter um Jquery que não mostre imagem de fundo?
    Sim, claro! Substitua/adicione o código abaixo em sua página .JS:
    ;jQuery(document).ready(function(){jQuery('body').before('<div class=pagcarreg style="text-align:center"><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><img src="IMAGEM_DE_CARREGAMENTO" border=0></div>');jQuery('body').hide()});window.onload=function(){jQuery('body').show();jQuery('.pagcarreg').hide()};
  • Onde encontro mais imagens de carregamento como Forumeiros?
    Se preferir, Forumeiros tem imgens de carregamento, mas para obter basta copiar o endereço no seguinte tutorial: Script de carregamento.

    Não resultou. Existe outro local para adicionar o código?
    Sim. Neste momento poderá recorrer as páginas HTML:
    [spoiler]1º - Criar uma página HTML para sustentar o código:
    Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
    Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

    Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
    Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
    Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
    Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
    Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.


    Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).




    - Inserir o código para que funcione em todas as páginas do fórum:
    Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

    Para adicionar o código aceda à:
    Painel de Controle -> Geral -> Fórum -> Configurações

    Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.


    O código será:
    <script src="ENDERECO-DA-PAGINA-HTML"></script>
    Por exemplo, no FdF:
    <script src="http://ajuda.forumeiros.com/h1-codigo"></script>


    © Fórum dos Fóruns


Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Imagem de carregamento

Mensagem por Bookmarlucas654 em 24/01/12, 02:39 pm

Não fechem o tópico, por favor! Estou aqui tentando ainda, por favor, calma!

EDIT: Pegou perfeitamenteeeeeeeee... mas a segunda, das páginas, hehe =P Pode fechar *u*
avatar

Bookmarlucas654
Usuário destaque

Masculino
Inscrito dia : 13/01/2012
Mensagens : 579
Pontos Ativos : 833

Ver perfil do usuário https://interessesdoreino.forumeiros.com

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum