Um Tema que segue a otimização de incorporar arquivos .css e .js apenas no rodapé do HTML precisa lidar com um problema de apresentação delicado. Dependendo da conexão do visitante, é possível que ele veja o site sem formatação, com problemas aparentes no layout. Em casos como esse uma técnica interessante de ser adotada é apresentar ao visitante uma informação de espera enquanto ele aguarda o carregamento da página.

Essa informação que antecede o conteúdo é denominada preloader. Com o JavaScript é possível realizar alguns processos no pré-carregamento da página, enquanto ela é carregada; e também logo após, concluído o carregamento.

Desse modo a criação de um preloader no WordPress será feita respeitando o seguinte processo:

  • logo após a tag <body> será inserido os códigos do preloader;
  • o preloader irá aguardar a página ser construída exibindo um GIF de loading (carregando);
  • concluído o carregamento serão removidos do HTML os arquivos e informações do preloader.

O uso do preloader (código de exemplo desse artigo) requer uma pequena intervenção no código do seu Tema. Logo após a abaertura da tag <body>, insira a seguinte instrução:

<?php do_action( 'wpjs_preloader' ); ?>

Feito isso, os processos de dentro do plugin serão poucos. Ele apenas irá inserir uma camada ao HTML para sobrepor o conteúdo da página enquanto ela é carregada:

class WPJS_Preloader
{

    private static $url;

    public static function setup()
    {
        self::$url = plugin_dir_url( __FILE__ );

        add_action( 'wpjs_preloader', array( 'WPJS_Preloader', 'enqueue' ) );
    }

    public static function enqueue( $c )
    {
        ?>
        <div id="preloader">
            <link type="text/css" rel="stylesheet" href="<?php echo self::$url; ?>wpjs-preloader.css">
            <script type="text/javascript" src="<?php echo self::$url; ?>wpjs-preloader.js"></script>
        </div>
        <?php
    }

}

add_action( 'plugins_loaded', array( 'WPJS_Preloader', 'setup' ) );

A incorporação tanto de CSS como de JS é feita de modo direto, pois o código JavaScript puro (não está sendo usada a jQuery) irá remover a div em questão logo após a página ter sido devidamente carregada.

Note que dentro dessa camada (#preloader) você pode inserir qualquer informação HTML que deseja apresentar como mensagem de espera. Entretanto tome cuidado para não incluir informação demais, senão até mesmo o preloader poderá demorar a aparecer.

Download do plugin Preloader no WordPress