tab menu, delay when clicking through tabs... jquery fix to show loading msg if load time over 1 sec?

I'm wondering if an开发者_如何学JAVAyone knows a fix for this.

I have a tab menu and when you click between tabs sometimes there is a delay in the page opening, - the difference can be from m/s to about half a minute - so i tried to add in a loading message for the pages that seemed to take a while.

I thought i had solved it by adding in the message when a tab was clicked

jQuery(document).ready(function()
 {
    jQuery('#loading').hide();
    jQuery('.tabmenu a').click(function(){
    jQuery('#loading').show();
 });
});

but on pages that previously took about 1 sec to load now take at least 5.

What i really need to do is something like

if tabmenu clicked and page takes longer than 1 second to change then show 'loading' message.

Is it possible to do this? Any help greatly appreciated :)

Thanks

How about:

$('.tabmenu a').click( function(event) {
  window.clearTimeout(window.timeOutId);
  window.timeOutId = window.setTimeout(function() {
      $('#loading').show();
  },1000); 
}); 

If the tabs are loading up slowly, it must mean you are doing it with the AJAX concept. Now the question is, are you doing it correct -- jQuery. If you are doing this with jQuery, probably with $.ajax() function, then you could easily make it better:

$.ajax({
    url: "exmaple.php",
    beforeSend: function () {
        $('#loading').show();
    },
    success: function (){
        $('#loading').hide();
    }
});

Further more:

$(document).ready(function () {
    $('.tabmenu a').click(function () {
        $.ajax({
            url: "exmaple.php",
            beforeSend: function () {
                $('#loading').show();
            },
            success: function (){
                $('#loading').hide();
            }
        });
    });
});

This should be the most accurate and relay only on the example.php pageload speed. That means, if you want to make your application faster, then you should optimize the back-end.