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

我使用JSON从控制器中检索数据，并使用jquery在视图中打印数据。当用户单击菜单链接时，将显示内容。在加载内容之前，用户必须等待几秒钟

所以在这段时间，我想在我的视图中显示加载图像，当内容显示成功时，加载图像隐藏

这是我放入加载图像的html：

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

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

getJSON（url，[数据]，[回调]）是

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

这表明我们可以指定一个回调，无论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();
                }
            });
        });
    });
});

函数ViewProduct（）{
$（“#加载”）.hide（）；
$（“#content ul#navmenu-v”）.empty（）；
$.getJSON（url、函数（数据）{
$.each（数据、函数（索引、数据选项）{
var new_li=$（“
”）；
主菜单.附加（新菜单）；
$（'a#'+dataOption.ID）。单击（函数（）{
//显示加载图像
$（“#加载”）.show（）；
$.ajax({
'type'：'GET'，
“url”：“产品列表/索引”，
“数据”：数据，
“数据类型”：“json”，
“成功”：功能（产品）{
//将内容追加到网页正文中
},
“完成”：函数（）{
$（“#加载”）.hide（）；
}
});
});
});
});

不确定您想要什么…您的加载图像已被此

$（'#加载'）隐藏。隐藏（）；

在此处隐藏，在文档准备好时只隐藏加载图像，但当我单击链接时，加载图像显示。

$（'blahblah'）。单击（函数（）{$（'#加载'）.show（）}）是的，但是在这个块中显示之后，我不知道如何隐藏它。如果正在加载ajax内容，请在ajax成功回调中放置
hide（）
。谢谢，但是当我这样做时，我的错误控制台
中有一个错误
无效标签
$。ajax（函数（）{type'：'GET'，…
。您能给我一些解决方案吗？
$.ajax({
  url: url,
  dataType: 'json',
  data: data,
  success: callback
});

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