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

问题是加载gif loadinggiftabs似乎永远不会被追加（因此被删除）。警报会被调用。根据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>

Jquery Tabs加载gif

2 个答案: