jquery-ui - Jquery 选项卡加载 gif

Question

我的标签定义如下 -

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

问题是加载 gifloadinggiftabs似乎永远不会被附加（因此，被删除）。警报确实会被调用。根据 Chrome 开发工具，没有 JS 错误。我也尝试附加到ui.panel而不是ui.tab

谢谢你。

Answer 1

我也有类似的烦恼。我花了很长时间才找到有用的东西。这是我现在的工作解决方案。

请注意，它也会缓存。if-construct 是使缓存工作所必需的，否则它会一直重新加载所有内容。

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

Answer 2

这是解决这个问题的另一种方法

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