javascript - 在jquery中成功加载内容之前使用加载图像

我使用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();
});

问题：单击后，我想隐藏正在加载的图像。有人可以告诉我吗？非常感谢。

最佳答案

$.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();
                }
            });
        });
    });
});