Как показать загрузку изображения каждый раз при загрузке вкладки

Question

Как показывать загрузку изображения каждый раз при загрузке страницы вкладки.

Я пытаюсь с событием 'выбрать'.

$(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>');
        }
    });
});

Если вкладка выбрана во второй раз, она работает хорошо, новпервые при загрузке страницы не получается.

Как решить эту проблему, есть идеи?

Спасибо.

PS.Извините за мой английский.

Answer 1

Теперь это работает именно то, что я хочу. Я комбинирую свой метод с методом Yekmer Simsek. Код выглядит следующим образом.

$(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>');
        }
    });
});

Но этот код нужно разместить в двух местах.

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>');

Есть ли другой метод?

Answer 2

Вы можете отображать индикатор загрузки каждый раз, когда делаете запрос ajax, как описано в моем сообщении в блоге.

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