title: Showing loader.gif with getJSON
body: <p>I want to use a loader gif while retrieving data through AJAX with getJSON. I have not found proper solution yet. I have used this  <code>$("#loader").show();</code> and this <code>$("#loader").hide();</code> but its starts as soon as page loads. I want it to work when i click the search button.
  Any suggestion will be highly appreciated.
  Here is the my html codes:</p>
  
  <pre><code>&lt;div class="container"&gt;
          &lt;div id="wrapper"&gt;
              &lt;section id="gallery"&gt;
                  &lt;input type="text" id="KUNDE"  placeholder="Search by name or ID." /&gt; &lt;di id="loader"&gt;&lt;img src="loader.gif"/&gt;&lt;/di&gt;
                  &lt;button id="buton" type="button" class="btn-style" value="search" onclick="find();"&gt;Search&lt;/button&gt;
                  &lt;button id="button" class="btn-style"&gt;Clean Results&lt;/button&gt;
  
              &lt;/section&gt;
              &lt;ul id="list"&gt;&lt;li&gt; &lt;/li&gt; &lt;/ul&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>Here is the my jquery codes:</p>
  
  <pre><code>&lt;script&gt;          
              $("#button").click(function (e) {
                  $("#list").find('li').remove();
              });
              $(function () {
                  $("#KUNDE").focus();
              });
              $(document).keypress(function (e) {
                  if (e.which == 13) {
                      $("#buton").click();
                  }
              });
              var uri = 'navisioncustomer.json';
              function find() {
                  var info = $('#KUNDE').val();
                  $("#loader").show();
                  $.getJSON(uri)                
                      .done(function (data) {
                          var item = data.filter(function (obj) {
                              return obj.name === info || obj.ID === info;
                          })[0];
                          if (typeof item !== 'undefined' || item !== null) {
                              $("#list").append("&lt;li&gt;ID      = " + item.ID + "&lt;br /&gt;Name    = " + item.name + "&lt;br /&gt;Phone      = " + item.phone + "&lt;br /&gt;Contact       = " + item.contact + "&lt;br /&gt;BalanceLCY      = " + item.balanceLCY + "&lt;br /&gt; CreditLimitLCY       = " + item.creditLimitLCY + "&lt;/li&gt;");
                          }
                      })               
                             .fail(function (jqXHR, textStatus, err) {
                                 $('#KUNDE').text('Error: ' + err);
                             });
                  $("#loader").hide();
              }
              var options = {
                  url: "navisioncustomer.json",
                  getValue: "name",
                  list: {
                      match: {
                          enabled: true
                      }
                  },
                  theme: "square"
              };
              $("#KUNDE").easyAutocomplete(options);                       
          &lt;/script&gt;
  </code></pre>