如何從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加載圖像時顯示微調器？

回答

相關問題