如何从Flickr加载图像时显示微调器？

我使用jquery.flickr-1.0.js在我的应用程序中搜索flickr以查找图像。我面临的问题是，有时它需要几秒钟的时间flickr到回应的结果，我想加载一个旋转的GIF代替我的搜索按钮 'btnRefresh'，直到结果返回。我怎样才能做到这一点？如何从Flickr加载图像时显示微调器？

jQuery(function(){ 
    jQuery(".btnRefresh").livequery('click', function(){ 
     var number = $(this).attr("id"); 
     $('#gallery_flickr_'+number+'').show(); 
     jQuery('#gallery_flickr_'+number+'').html("").flickr({  
      api_key: "XXXXXXXXXXXXXXXXXXXX",  
      per_page: 18, 
      search_text: $('input#flickr_search_'+number+'').val(), 
      id: $(this).attr("id") 
     }); 
    }); 
});

来源

2009-01-12 adam

flickr插件支持其选项中的回调属性。所以，你可以在调用flickr之前显示微调，然后在回调中隐藏它。

jQuery(function(){ 
    jQuery(".btnRefresh").livequery('click', function(){ 
     $("#spinner").show(); 

     var number = $(this).attr("id"); 
     $('#gallery_flickr_'+number+'').show(); 
     jQuery('#gallery_flickr_'+number+'').html("").flickr({  
      api_key: "XXXXXXXXXXXXXXXXXXXX",  
      per_page: 18, 
      search_text: $('input#flickr_search_'+number+'').val(), 
      id: $(this).attr("id"), 
      callback: function() { 
       $("#spinner").hide(); 
      } 
     }); 
    }); 
});

这应该做...假设你在你的页面调用微调的东西是默认隐藏。

来源

2009-01-12 03:25:53

我发现'api_callback'和'callback'属性。你能否详细说明我可以如何在回调后隐藏它们？我相对较新使用JavaScript和jQuery。谢谢 – adam 2009-01-12 03:37:39

我不熟悉你上面引用的flickr（）方法，但一般的方式来处理各种各样的事情是你展示你的gif拨打电话，然后把它隐藏在调用完成时前。它看起来不像上面的代码是异步的，所以我的方法是将一个gif放在btnRefresh旁边，id为'imgLoading'。使第一行像$（'imgRefresh'）。hide（）;在您单击处理程序，包装功能与

$('.imgLoading').show(); $('.btnRefresh').hide();

和

$('.imgRefresh').hide(); $('.btnRefresh').show();

这不是最先进的方法，但你知道...保持它的简单和诸如此类的东西。

问题是，如果它不是异步的，你会怎么做超时？刷新按钮可以永久隐藏。你可能会考虑设置一个计时器来确保给用户提供一个可用状态（如果你想获得幻想，一个msg说脚本似乎超时）。

来源

2009-01-12 03:22:54 Travis

首先 - 转到这里，并创建一个旋转的gif或png - http://ajaxload.info/

二 - 保存在微调您的图像目录 - ./images/ajax-loader.gif

三 - 一个DIV添加到您的HTML在微调将位于页面上，让我们说

<div id="spinner"></div>

第四个 - 将两行添加到您现有的代码中。

jQuery(function(){ 
    jQuery(".btnRefresh").livequery('click', function(){ 
     var number = $(this).attr("id"); 
     $('#gallery_flickr_'+number+'').show(); 
     $("div#spinner").html("<img src='./images/ajax-loader.gif'>"); 
     jQuery('#gallery_flickr_'+number+'').html("").flickr({  
      api_key: "XXXXXXXXXXXXXXXXXXXX",  
      per_page: 18, 
      search_text: $('input#flickr_search_'+number+'').val(), 
      id: $(this).attr("id") 
     }); 
     $("div#spinner").html(" "); 
    }); 
});

来源

2009-01-12 03:43:21 Mike

如何从Flickr加载图像时显示微调器？

回答

相关问题