Question

每次加载标签页时如何显示加载图像。

我尝试使用'select'事件。

$(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

如何在每次加载标签页时显示加载图像

2 个答案: