How to show loading image every time when tab page loading

How to show loading image every time when tab page loading.

I try with 'select' event.

$(function () {
    $('#my-tabs').tabs({
        select: function (event, ui) {
            var idx = $('#my-tabs').tabs('option', 'selected');
            $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>');
        }
    });
});

If tab page selected for second time it work well , but for first time when page load it doesn't work.

How to solve this problem, any ideas?

Thank 开发者_高级运维you.

PS. Sorry for my English.

Now it work exactly what i want. I combine my method with Yekmer Simsek method. The code look like this.

$(function () {
    $('#my-tabs').tabs({
        ajaxOptions: {
            beforeSend: function () {
                var idx = $('#my-tabs').tabs('option', 'selected');
                $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>');
            },
        },
        select: function (event, ui) {
            var idx = $('#my-tabs').tabs('option', 'selected');
            $($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>');
        }
    });
});

But have to place this code in two place.

var idx = $('#my-tabs').tabs('option', 'selected');
$($("#my-tabs div")[idx]).html('<p style="width: 100%; text-align: center;"><img src="Content/Images/ajax-loader.gif" width="220" height="19" /></p>');

Is there other method?

You can show a loading indicator every time you make an ajax request as described in my blog post.

http://yekmer.posterous.com/show-loading-spinner-automatically-using-jque