title: Ajax loading spinner
body: <p>How can I add loading spinner (some gif) for each image while loading and when image is loaded I want to remove spinner.
  Here is my code:</p>
  
  <pre><code>$.ajax({
    url: 'https://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?',
    cache: false,
    dataType: 'json',
    data: {
      tags    : 'cats',
      format  : "json"
    }
  }).done(function( responseData ){
    html = '&lt;row&gt;';
    $.each( responseData.items, function( index, cat ){
      html += '&lt;div class="col-md-3"&gt;';
      html += '&lt;a href="' + cat.link +'" class="thumbnail"&gt;';
      html += '&lt;img src="' + cat.media.m + '" alt="" class="images"&gt;';
      tml += '&lt;/a&gt;&lt;/div&gt;';
    }); // end $.each
    html += '&lt;/row&gt;';
    $('#photos').html(html);
    $searchField.attr('disabled', false);
    $submitButton.attr('disabled', false).text('Search');
  });
  </code></pre>
  
  <p>Thanks,</p>