Jquery ui Jquery选项卡加载gif

我的选项卡定义如下-

$(function () {
        $("#tabs").tabs({
            beforeLoad: function (event, ui) {
                var tab = $(ui.tab);

                if (tab.is(":empty")) {
                    tab.append(" <div class='loadinggiftabs' ><img src='./Content/graphics/loading.gif' /></div>")
                }

                alert('before');
            },
            load: function (event, ui) {
                $(ui.tab).find(".loadinggiftabs").remove();
                alert('after');
            }
        });
    });

$（函数（）{
$（“#制表符”）。制表符({
加载前：函数（事件、ui）{
var-tab=$（ui.tab）；
如果（制表符为（“：空”））{
附页（“”）
}
警惕（“之前”）；
},
加载：函数（事件、用户界面）{
$（ui.tab）.find（“.loadinggiftab”）.remove（）；
警报（“之后”）；
}
});
});

问题在于加载gif

loadinggiftabs

似乎从未被附加（因此被删除）。警报确实会被调用。根据Chrome开发工具，没有JS错误。我还尝试附加到

ui.panel

而不是

ui.tab

---

谢谢。

我也遇到过类似的麻烦。我花了很长时间才找到工作。 这是我现在的工作解决方案

注意，它也会缓存。如果构造是使缓存工作的必要条件，那么它将一直重新加载所有内容

$(function () {
    $("#tabs").tabs({
        cache: true,
        /* Probably won't need this object, it's just to appease jsfiddle */
        ajaxOptions: {},

        beforeLoad: function (event, ui) {
            if ($(ui.panel).html()) {
                event.preventDefault()
                return false;
            }
            else {
                ui.panel.html('<div><img src="/Images/loading.gif" /></div>');
                return true;
            }
        }
    });
});

$（函数（）{
$（“#制表符”）。制表符({
是的，
/*可能不需要这个对象，只是为了安抚JSFIDLE*/
ajaxOptions:{}，
加载前：函数（事件、ui）{
if（$（ui.panel.html（））{
event.preventDefault（）
返回false；
}
否则{
ui.panel.html（“”）；
返回true；
}
}
});
});

这里有另一种解决方法

<div id="spinner" style="display:none;"><img src="/Images/loading.gif" /></div>


<script>
$(document).ready(function(){ 
    $("#spinner").bind("ajaxSend", function() {
        $(this).show();
    }).bind("ajaxStop", function() {
        $(this).hide();
    }).bind("ajaxError", function() {
        $(this).hide();
    });
});
</script>

$（文档）.ready（函数（）{
$（“#微调器”）.bind（“ajaxSend”，function（）{
$（this.show（）；
}).bind（“ajaxStop”，函数（）{
$（this.hide（）；
}).bind（“ajaxError”，函数（）{
$（this.hide（）；
});
});

你确定你的标签是空的吗？

加载前

不会发生在加载前之前，这样加载gif的实际显示时间就很短了吗？@是的，我确定。我用chrome js调试器确认了。@JanDvorak可能吧。我不熟悉jquery。你知道一个更好的/正确的方法来完成我想要的吗？通常，你会在开始做某事时放置/显示加载的GIF，然后在完成时删除/隐藏它。“当你开始做”通常是“现在，不要等待任何事情”。