2

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

質問：クリック後に読み込み中の画像を非表示にしたいのですが。誰でもこれについて教えてもらえますか？本当にありがとう。

4

1 に答える 1

2

$.getJSON(url, [, data], [, callback])の省略形です

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

jQuery.ajax仕様は、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();
                }
            });
        });
    });
});
于 2012-06-04T04:01:36.533 に答える