Question

如何在加载时为每个图像添加加载微调器（某些gif），并在加载图像时我想删除微调器。这是我的代码：

$.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 = '<row>';
  $.each( responseData.items, function( index, cat ){
    html += '<div class="col-md-3">';
    html += '<a href="' + cat.link +'" class="thumbnail">';
    html += '<img src="' + cat.media.m + '" alt="" class="images">';
    tml += '</a></div>';
  }); // end $.each
  html += '</row>';
  $('#photos').html(html);
  $searchField.attr('disabled', false);
  $submitButton.attr('disabled', false).text('Search');
});

谢谢，

Answer 1

在Ajax中使用 beforeSend 和完成选项

$.ajax({
    url: 'https://api.flickr.com/services/feeds/photos_public.gne?      jsoncallback=?',
   cache: false,
   dataType: 'json',
   data: {
      tags    : 'cats',
      format  : "json"
   },
   beforeSend: {
      // add loading spinner
   },
   complete: {
      // remove loading spinner
   }
   }).done(function( responseData ){
      html = '<row>';
      $.each( responseData.items, function( index, cat ){
         html += '<div class="col-md-3">';
         html += '<a href="' + cat.link +'" class="thumbnail">';
         html += '<img src="' + cat.media.m + '" alt="" class="images">';
         tml += '</a></div>';
      }); // end $.each
      html += '</row>';
      $('#photos').html(html);
      $searchField.attr('disabled', false);
      $submitButton.attr('disabled', false).text('Search');
   });

Answer 2

你可以这样做：

...
html += '<img src="' + cat.media.m + '" alt="" class="images hidden">';
html += '<span class="spinner"></span>';
...


$("#photos img").load(function() {
    $(this).show();
    $(this).siblings('.spinner').remove();
});

img标记中的hidden类使用css隐藏您的图像：

.hidden {
    display: none;
}

由您决定如何在<span class="spinner"></span>

中添加微调器

Ajax加载微调器

2 个答案: