在构造html之前，Ajax加载图像隐藏

Question

在构建页面之前，我的加载图像消失了。 在我的类别页面中，我进行了一个ajax调用，该调用将给我一个来自后端的模型对象，该对象将用于显示产品。

流程对我的如下代码有点奇怪

    it first displays -> before loadProductsGrid::::>
    loading image is shown
    and then it displays  --> after loadProductsGrid::::> loading image is shown. 
  After that loading image is hidden. 
actual html content from the model is loaded in products-grid. (ie from loadProductsGrid) 

预计会看到

    first should display -> before loadProductsGrid::::>
    loading image is displayed 

actual html content from the model is loaded in products-grid. (ie from loadProductsGrid) 

    and then it should display --> after loadProductsGrid::::> with loading image displayed. 
    After that loading image should need to be hidden. 

我的jsp代码如下所示

   <div class="category-products">
   <div align="center"  class="loadingImageDiv" id="loadingImageDiv">
   <img align="center" src="${loadingImgUrl}" class="loading">
   </div>
    <ol class="products-grid" id="products-grid">
    </ol>
  </div>

我的脚本如下所示

$(function(){
    loadCategoryProducts();

// construct url 
url = "url will be constructed";

alert("before loadProductsGrid::::>");

$('#loadingImageDiv').show(); 
loadProductsGrid(url,'#products-grid');

alert("after loadProductsGrid::::>");

$('#loadingImageDiv').hide(); 

});

function loadProductsGrid(url,divProductsContainer) {

    $.ajax({
            type: 'POST',
            dataType: "json",
            url: url,
            success: function(productGrid) {

                buildProductsGrid(productGrid,divProductsContainer);
                // loads the products (huge) using productGrid model object in divProductsContainer 

                $('#loadingImageDiv').hide();

            },
            complete: function(){
                alert("complete");
                $('#loadingImageDiv').hide();
    //          $('.loadingImageDiv').css("visibility", "hidden");
             },
            error: function(jqXHR,textStatus,errorThrown) { 
                $('#loadingImageDiv').hide();
                alert('Error ' + jqXHR + "-" + textStatus + "-" + errorThrown);
            }

    });

 }

感谢您的帮助。

谢谢