Problema con preloader

[neodani]

Buenas,

No se porqué mi preloader solo se muestra una vez.

Es un sistema de pestañas, que carga la información mediante load. Me gustaria que si la información se demora muestre el ajax-loader

Estructura de pestañas

Código HTML:

<div id="clienttabs">
<ul>
    <li id="datos"><a href="#">Datos de usuario</a></li>
    <li id="avatar"><a href="#">Avatar</a></li>
    <li id="pass"><a href="#">Contraseña</a></li>
    <li id="preferencias"><a href="#">Preferencias</a></li>
    <li id="privacidad"><a href="#">Privacidad</a></li>
</ul>
</div>
<div id="contenttab">
<div id="loading">
    <br/><br/>Por favor espere, estamos cargando el contenido...<br/>
    <img src="/imagenes/iconos/loading.gif" alt="Loading..." />
</div>
</div>
 

menu.js

Código Javascript:

$(document).ready(function(){
    //References
    var sections = $("#clienttabs li");
    var loading = $("#loading");
    var content = $("#contenttab");
    
    //Manage click events
    sections.click(function(evento){
        evento.preventDefault();
        //show the loading bar
        showLoading();
        //load selected section
        switch(this.id){
            case "datos":
                $("#clienttabs ul li").removeClass("tabselected"); //Remove any "tabselected" class
                content.load("/secciones/mi_cuenta/cc_datos_usuario.php", hideLoading);
                $("#datos").addClass('tabselected');
                break;
            case "avatar":
                $("#clienttabs ul li").removeClass("tabselected"); //Remove any "tabselected" class
                content.load("/secciones/mi_cuenta/cc_avatar.php", hideLoading);
                $("#avatar").addClass('tabselected');
                break;
            case "pass":
                $("#clienttabs ul li").removeClass("tabselected"); //Remove any "tabselected" class
                content.load("/secciones/mi_cuenta/sections.html #section_interviews", hideLoading);
                $("#pass").addClass('tabselected');
                break;
            case "preferencias":
                $("#clienttabs ul li").removeClass("tabselected"); //Remove any "tabselected" class
                content.load("/secciones/mi_cuenta/sections.html #section_interviews", hideLoading).hide().fadeIn('slow');
                $("#preferencias").addClass('tabselected');
                break;
            case "privacidad":
                $("#clienttabs ul li").removeClass("tabselected"); //Remove any "tabselected" class
                content.load("http://www.nexica.com/es/", hideLoading).hide().fadeIn('slow');
                $("#privacidad").addClass('tabselected');
                break;
            default:
                //hide loading bar if there is no selected section
                hideLoading();
                break;
        }
    });
 
    //show loading bar
    function showLoading(){
        loading
            .css({visibility:"visible"})
            .css({opacity:"1"})
            .css({display:"block"})
        ;
        //$("#form_registro").css({display:"none"});
    }
    //hide loading bar
    function hideLoading(){
        loading.fadeTo(1000, 0);
    };
});
 

css
#loading{
text-align: center;
visibility: hidden;
display:none;
}

Pulse sobre la sección que pulse, solo se muestra una vez el ajax-preloader. ¿Alguien me puede decir como corregirlo?

Muchas gracias de antemano