顯示加載的gif，直到ajax調用已加載（並且不與setInterval交互）

Question

我的javascript部分有一個Ajax調用，它從數據庫中收集一些數據。 我注意到該過程大約需要16秒鍾的時間（我知道它對於數據庫調用來說太長了，需要通過查詢來修復某些問題），所以我想要一些臨時的東西（例如gif來顯示加載）。 這里的許多指南和線程都介紹了如何在html中執行此操作，但是由於這種情況發生在我的ajax調用中，因此我該怎么做而不與更新金字塔的setInterval交互。

function Plugin(element, options) {
    var ajaxTest = function(source) {
        $.ajax({
            url : "pyramidList",
            type : "GET",
            dataType : "json",
            data : {
                source : source
            },
            success : function(response) {
                var arrayBlock = [];
                var source1;
                for (var i = 0; i < response.length; i++) {

                    var block = {};
                    source1 = parseInt(response[i].source);
                    block.level = parseInt(response[i].level, 10);
                    block.width = parseFloat(response[i].width);
                    block.position = parseInt(response[i].position, 10);

                    block.name = response[i].superCategory.toString();
                    block.colour = response[i].statusColor.toString(); // colour
                    arrayBlock.push(block);
                }

                Plugin.prototype.init(source1);
                Plugin.prototype.render(arrayBlock);


            },
            Error : function() {
                alert("Error: loading the Pyramid");
            }
        });

    };
    Plugin.prototype.element = $(element);

    // jQuery has an extend method that merges the
    // contents of two or more objects, storing the
    // result in the first object. The first object
    // is generally empty because we don't want to alter
    // the default options for future instances of the plugin
    Plugin.prototype.options = $.extend({}, defaults, options);

    Plugin.prototype._defaults = defaults;
    Plugin.prototype._name = pluginName;

    ajaxTest(options.source);
    setInterval(ajaxTest, 15000);
}

最好的祝福，

Answer 1

$.ajax({
    url : "pyramidList",
    type : "GET",
    dataType : "json",
    data : {
        source : source
    },
    beforeSend: function() {    <<< Add this function
        //show loader.gif
    },
    success : function() {

    },
    complete: function() {
        //hide loader.gif
    }
});

Answer 2

您的方案的一些HTML會有所幫助。 沒有那我只能預測。

<div id="main-container">
<div class="container">
    <div class="your-data"></div>
    <div class="your-data"></div>
    .....
</div>
<div class="loading" style="display: none">{{your gif}}</div>
</div>

在javascript中，

$.ajax({
   beforeSend: function() {
       $('#main-container .loading').show();
   },
   success: function(response) {
       $('#main-container .loading').hide();
       .....
   }
});