Question

Hola. ¿Qué tal? Les comento mi situación. Tengo una especie de panel (adjunto una imagen y su respectivo código, que es como viene por defecto el nav) con varias opciones, en cada una de ellas le muestran, lógicamente, distintos datos al usuario. Me he dado cuenta que tras ir agregándole más información y consultas PHP a cada una de los apartados en el nav la página (sólo esa en especial, donde se encuentra el nav) está tardando un poquito más que antes en cargar.
He leído y también visto, en algunos casos, en Internet, que varios desarrolladores lo que hacen es colocar un ajaxloader. Así es, al parecer es algo como si no cargaran todos los apartados del nav excepto el activo o principal hasta que no se los clickee. ¿Puede ser esto así? Y recién cuando son clickeados, se cargan, aparece el ajaxloader (en algunos casos, con el típico texto de "Cargando") y finalmente muestra la información.

Answer 1

Que tal si incluyes un evento 'click' a los enlaces de las pestañas, y haces la consulta junto con toda la lógica allí.

por ejemplo:

http://jsfiddle.net/3gx9tqkg/

(function () {
    var remoteUrl, getRemoteData, cachedData,
        tabPanelSelector, showLoading, hideLoading,
        loaderLayout;

    cachedData = {};
    loaderLayout = $('<div >')
        .addClass('loading-layout')
        .append($('<i class="glyphicon glyphicon-refresh spinner" >'));

    getRemoteData = function (url) {
        var deferred = $.Deferred();

        if (cachedData[remoteUrl]) {
            return deferred.resolve(cachedData[remoteUrl]);
        }

        return $.ajax({
            method: 'GET',
            dataType: 'json',
            url: url,
            data: {}
        });
    };

    showLoading = function () {
        $(this)
            .append(loaderLayout)
            .find('.loading-layout')
            .fadeIn();
    }

    hideLoading = function () {
        $(this).find('.loading-layout').fadeOut();
    }

    $('#app-tabs a').on('click', function (e) {
        e.preventDefault();
        tabPanelSelector = $(this).data('target');
        remoteUrl = $(this).data('remote');

        if (!$(tabPanelSelector).length) {
            tabPanelSelector = $(this).attr('href');
        }

        showLoading.call($(tabPanelSelector)[0]);

        getRemoteData(remoteUrl).done($.proxy(function (response) {
            $(tabPanelSelector).html(response.body);
            cachedData[remoteUrl] = response;
            hideLoading.call($(tabPanelSelector)[0]);
        }, this));

        $(this).tab('show');
    });

    $('#app-tabs a').first().trigger('click');
})();

---

PD:

• yo use el atributo data-remote para obtener la url remota de la pestaña.
• Use una promesa en jquery ( $.Deferred ) para obtener la respuesta de la url remota
• llamo al evento click del primer enlace para cargar la primera pestaña.