在jquery中加載內容成功加載之前

Question

我使用JSON從我的控制器中檢索數據並使用jquery將其打印在我的視圖中。用戶點擊菜單鏈接時會顯示內容。在內容加載之前，用戶必須等待幾秒鐘。

所以在這個期間，我想在我的視圖中顯示加載圖片，當內容顯示成功時，加載圖片隱藏。

這是我把加載圖片的HTML：

<div id="loading" style="position:relative; text-align:center;"> 
    <img src="/Content/Images/loading.gif" alt="Processing" /> 
</div> 

這是jQuery的樣品功能：

function ViewProduct() { 
    $('#loading').hide(); 
    $("#content ul#navmenu-v").empty(); 
    $.getJSON(url, function (data) { 
    $.each(data, function (index, dataOption) { 
    var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>"); 
     mainMenu.append(new_li); 
     $('a#' + dataOption.ID).click(function() { 
      //display the loading image 
      $.getJSON("ProductListing/Index", data, function (product) { 
       //append the content in the body of web page 
      }); 
     }); 
    }); 
}); 

}

這就是我所謂的功能：

$(document).ready(function() { 
    ViewProduct(); 
}); 

問題：我想單擊後隱藏加載圖像。任何人都可以告訴我這個嗎？非常感謝。

Answer 1

$.getJSON(url, [, data], [, callback])是

$.ajax({ 
    url: url, 
    dataType: 'json', 
    data: data, 
    success: callback 
}); 

的jQuery.ajax specification顯示，我們可以指定一個回調，這將觸發AJAX請求是否成功的簡寫。我們將用它來隱藏請求後，加載圖標：

function ViewProduct() { 
    $('#loading').hide(); 
    $("#content ul#navmenu-v").empty(); 

    $.getJSON(url, function (data) { 
     $.each(data, function (index, dataOption) { 
     var new_li = $("<li class='level1' id='select_list'><a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'>" + dataOption.Name + "</a>"); 
     mainMenu.append(new_li); 
     $('a#' + dataOption.ID).click(function() { 

      //display the loading image 
      $('#loading').show(); 

      $.ajax({ 
       'type': 'GET', 
       'url': 'ProductListing/Index', 
       'data': data, 
       'dataType': 'json', 
       'success': function (product) { 
        //append the content in the body of web page 
       }, 
       'complete': function() { 
        $('#loading').hide(); 
       } 
      }); 
     }); 
    }); 
});