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

Question

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

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

这是我放置加载图像的 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();
                }
            });
        });
    });
});