Use loading image before the content success loading in jquery
<p>I used JSON to retrieve data from my controller and print it on my view using jquery. The content is display when users click on the menu link. Before the content load, user have to wait a few second.</p>

<p>So in this period, I want to display the loading image in my view, and when the content is display success, the loading image hide.</p>

<p>This is the html that I put the loading image :</p>

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

<p>This is the sample function of jquery :</p>

<pre><code>function ViewProduct() {
  $('#loading').hide();
  $("#content ul#navmenu-v").empty();
  $.getJSON(url, function (data) {
     $.each(data, function (index, dataOption) {
     var new_li = $("&lt;li class='level1' id='select_list'&gt;&lt;a href='javascript:void(0);' id='" + dataOption.ID + "' class ='selectedcategory'&gt;" + dataOption.Name + "&lt;/a&gt;");
        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
            });
        });
    });
});
</code></pre>

<p>}</p>

<p>This is where I called the function :</p>

<pre><code>$(document).ready(function () {
   ViewProduct();
});
</code></pre>

<p>Question : I want to hide the loading image after click. Anyone can tell me about this? Thanks so much. </p>
