显示 Jquery GIF onload Jquery Tabs

Question

我正在尝试在加载 AJAX 内容时在标签显示的区域内显示微调器 gif。但是，我的 Ajax 调用不会发生在选项卡代码中。它通过如下所示的外部 ajax 调用发生，然后在 ajax 调用的 .done() 方法期间，我将 json 数据放在位于选项卡内的 div 中。

我想在 ajax 调用发生时在选项卡内显示一个微调器。我在网上看了几个教程，但没有什么能满足我的需求。任何帮助表示感谢。

                          $('#tabs').tabs({
                                    selected: 1,
                                    beforeLoad: function(event, ui) {
                                        $('#imageSpinner').show();
                                        /* if ajax call to retrieve tab content failed */
                                        ui.jqXHR.error(function() {
                                           // $('#imageSpinner').hide();
                                            ui.panel.html("An error occured.");
                                        });
                                    },

                                    /* Called when tab is loaded */
                                    load: function(event, ui) {
                                      //  $('#imageSpinner').hide();

                                    }
                                });


<div id="tabs">
                                <ul>
                                    <li><a href="#tabs-1">PL Message Viewer</a>
                                    </li>
                                    <li><a href="#tabs-2">File Message Viewer</a>
                                    </li>
                                </ul>

                                <div id="tabs-1" style="height:535px; overflow-y:scroll; float:left; z-index:1;">
                                    <div style="margin-left:32px;">
                                        <div id="buttonContent" class="buttonContente">
                                         <img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">
                                        </div>
                                    </div>
                                </div>

                                <div id="tabs-2" style="height:535px; overflow-y:scroll; float:left;">
                                    <div style="margin-left:32px;">
                                        <div id="buttonContentFile" class="buttonContente"></div>
                                    </div>
                                </div>

                            </div>




function getFilters() {
                    return $.ajax({
                        type: "GET",
                        url: "InsertMessage",
                        data: "term=PLM",
                        cache: false,
                        success: function (data) {},
                        error: function (xhr, status, error) {
                            alert(xhr.responseText);
                        }
                    });
                }
                getFilters().done(function (r) {
                    if (r) {
                        gridValsstr = r;
                        gridvals = JSON.parse(gridValsstr);
                        $.each(gridvals.messagetypes, function (key, value) {
                            $("#buttonContent").append('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span>  </label></div>');
                        });

                    }
                })
                    .fail(function (x) {
                        alert("Asynchronous call failed.");
                    });

Answer 1

页面加载时，图像似乎默认显示。 要删除图像并显示内容，请在 done 函数中使用 html() 而不是 append()。

这将用加载的内容替换图像。

$("#buttonContent").html('<div id="ck-button"> <label> <input type="checkbox" value="' + value.id + '"><span>' + value.messagetype + '</span>  </label></div>');

由于您似乎知道要加载 ajax 调用结果的元素，因此您可以在调用 getFilters() 函数时将内容设置为微调器

function getFilters()
{
    $("#buttonContent").html('<img id="imageSpinner" src="images/image_623941.gif" style="vertical-align:middle; z-index:200;'">';
    // your ajax call
});

Answer 2

尝试更改 beforeLoad 函数以包含一个函数来处理 ajax 调用的完成事件...

beforeLoad: function(event, ui) {
    $('#imageSpinner').show();

    // when ajax call to retrieve tab content is complete
    ui.jqXHT.done(function() {
        $('#imageSpinner').hide();
    });

    // if ajax call to retrieve tab content failed
    ui.jqXHR.error(function() {
        ui.panel.html("An error occured.");
    });
},

Answer 3

// Tabs
$("#tabs").tabs({
// This enables caching as well
beforeLoad: function( event, ui ) {
    if (ui.tab.data("loaded")) {
        event.preventDefault();
        return;
    }
    ui.jqXHR.success(function() {
        ui.tab.data("loaded", true);
        $(".spinner").hide();
    }),
    ui.jqXHR.error(function( jqXHR, textStatus, errorThrown ) { 
        alert(lang.tabErrorMsg);
    })
},
beforeActivate: function( event, ui ) {
    if (ui.newPanel.html()=="") ui.newPanel.html('<img class="spinner" src="spinner.gif">);
        }
});