[TUTORIAL] 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

1º - 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

Habilitar o gerenciamento dos códigos Javascript - Permite ativar os scripts personalizados criados pelo administrador no fórum. Este recurso não tem qualquer impacto nos scripts nativos do fórum.

Tìtulo - Cria um título para identificar o script a ser modificado mais tarde na lista de scripts do fórum.

Investimento - Define o local em específico que este script será executado. Você pode investir o script para vários locais no fórum (Todas as páginas) ou pode definir para certos locais disponíveis na tela de investimento. Neste caso, estaremos investindo em todas as páginas.

Código Javascript - Espaço destinado a receber o script que será ativado pelo administrador. Antes de aplicar o script ao fórum, é importante revisá-lo para ter certeza de seu funcionamento.

Clique no botão "Criar um novo javascript" para passar-mos para o próximo passo.

2º - Criar o script:
Com a página de javascript aberta em seu painel de controle, teremos que adicionar um JS o qual fará com que uma página seja exibida a cada carregamento de página.
Em 'Investimento', marque para o efeito ser reproduzido "Em todas as páginas".

Código:

/**
 * Create a loading page while the current page is loading.
 * @author: Luiz~
 * @see: <a href="http://ajuda.forumeiros.com/">Fórum dos Fóruns</a>
 * @licence: MIT
 */
(function ($) {
  'use strict';
 
  /**
  * Main Config:
  */
  var config = {
    'icon': 'fa-spin',
    'background': '#39c',
  };
 
  var marginTopQtt = ( $(window).height() / 2 ) - 60;
 
  var style = [
    '.page-loader {',
    '  position: fixed;',
    '  background-color: ' + config.background + ';',
    '  top: 0;',
    '  bottom: 0;',
    '  left: 0;',
    '  right: 0;',
    '  z-index: 99999999;',
    '  text-align: center;',
    '  color: #fff;',
    '  font-size: 20px;',
    '  opacity: 1;',
    '  -moz-transition: all 200ms;',
    '  -webkit-transition: all 200ms;',
    '  -ms-transition: all 200ms;',
    '  -o-transition: all 200ms;',
    '  transition: all 200ms;',
    '}',
    '',
    '.page-loader-close {',
    '  opacity: 0;',
    '  z-index: -99999999;',
    '  pointer-events: none;',
    '}',
    '',
    '.page-loader i.fa {',
    '  position: fixed;',
    '  margin-top: ' + marginTopQtt + 'px;',
    '}',
  ].join('\n');
 
 
  $('<style>', { text: style }).appendTo('head');
 
  $('body')
    .append([
      '<div class="page-loader">',
      '  <i class="fa fa-circle-o-notch ' + config.icon + ' fa-3x fa-fw"></i>',
      '</div>',
    ].join('\n'))
  ;
 
  $(window).on('load', function () {
    $('.page-loader').addClass('page-loader-close');
  });
 
}(jQuery));

Depois de criar o script, o resultado já estará visível.

---

© Fórum dos Fóruns

Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título: Função de carregamento em páginas