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