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

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

1 个答案: