Ajax加载旋转器

Ajax loading spinner

本文关键字：旋转 加载 Ajax      更新时间：2023-09-26

如何在加载时为每个图像添加加载旋转器(一些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');
});

谢谢,

你可以这样做:

...
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中使用 beforeend 和complete选项

$.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');
   });
相关文章：