如果預加載程序無法加載內容

Question

我們使用yoxview和正在提取數據的圖像縮略圖從Picasa中提取一些圖像數據。

我們顯示預加載器圖像。

現在，數據是動態獲取的，並且有時候我們要求的抓取url解析沒有結果。所以對於div的圖像預加載器，保持呼呼......主要是因爲數據加載失敗。

所以我的問題是，如果沒有結果在5秒內發現，而preloader正在顯示，我們可以啓動一個超時，並顯示一個佔位符圖像疊加preloader，與說消息..無法獲取此時的Feed內容??

我們的代碼是這樣的：

$(document).ready(function(){ 
    $("#yoxview_picasa").yoxview({ 
     dataUrl: 'http://picasaweb.google.com/lh/view?q=<?=$randomResult["suburb"];?>+<?=$randomResult["state"];?>', 
     dataSourceOptions: { 
      "max-results": 21, 
       imgmax: 800 
       }, 
       onLoadBegin:function(){ 
       $('.imagecontainerburbs').hide(); 
       $('<div class="loading" style="width: 580px; height: 250px;position:relative;margin-top:100px;margin-bottom:-250px;"><center><img src="http://www.pathToPreloaderImage.com/css/images/422.gif" alt="loading"/><br /></center></div>').insertAfter('.imagecontainerburbs'); 
       }, 
       onLoadComplete:function(){ 
       $('.loading').remove(); 
       $('.imagecontainerburbs').find("img").css({'width':'64px','height':'64px'}); 
       $('.imagecontainerburbs').find("img").createLoader(); 
       $('.imagecontainerburbs').fadeIn(); 
       } 
      }); 
     }); 

正如你所看到的，我們用一記漂亮的一塊PHP的傳播數據鏈接，從我們的數據庫。

本質上是這樣獲取數據。

url：picasa.google.com/lh/view？並且我們將查詢的郊區和狀態加入到網址中。

因此，如果當我們爲隨機結果ping picasa，並且它沒有結果時。當前加載器動畫不斷顯示，我需要做的是如果沒有數據被提取，啓動一個佔位符，指出無法獲取數據在這個時候什麼的。

有什麼建議嗎？

---

編輯/更新 下面給出的建議，我應該增加我這樣的代碼？

onLoadBegin:function(){ 
    timer = setTimeout(function() { 
    // get no data in 20 seconds perform something 
    $('<img src="http://path to image file.com/placeholder.png">'), 
},20*1000); 

Answer 1

好的，我們計算出來了，其實很流血簡單。

onNoData:function(){ 
       $('.imagecontainerburbs').hide(); 
       $('.loading').hide(); 
       $('<div class="nodata" style="width: 580px; height: 250px;position:relative;margin-top:100px;margin-bottom:-250px;"><center><p>We cannot load data from this suburb, please refresh page and try again.</p><br /></center></div>').insertAfter('.imagecontainerburbs'); 
       }, 

Answer 2

我在yoxview文檔中看不到任何類型的超時選項。如果他們在內部超時，可能會觸發處理程序onLoadError或onLoadNoData。你可以從這些處理程序開始，看它是否被調用。您也可以查看源代碼並查看它們是否使用了任何超時。

如果不是，您可以實現自己的。

$(document).ready(function(){ 
    $("#yoxview_picasa").yoxview({ 
     var timer; 
     dataUrl: 'http://picasaweb.google.com/lh/view?q=<?=$randomResult["suburb"];?>+<?=$randomResult["state"];?>', 
     dataSourceOptions: { 
      "max-results": 21, 
       imgmax: 800 
     }, 
     onLoadBegin:function(){ 
      timer = setTimeout(function() { 
       // got no data in 20 seconds here, decide what to do 
      }, 20*1000); 
      $('.imagecontainerburbs').hide(); 
      $('<div class="loading" style="width: 580px; height: 250px;position:relative;margin-top:100px;margin-bottom:-250px;"><center><img src="http://www.pathToPreloaderImage.com/css/images/422.gif" alt="loading"/><br /></center></div>').insertAfter('.imagecontainerburbs'); 
     }, 
     onLoadComplete:function(){ 
      clearTimeout(timer); 
      $('.loading').remove(); 
      $('.imagecontainerburbs').find("img").css({'width':'64px','height':'64px'}); 
      $('.imagecontainerburbs').find("img").createLoader(); 
      $('.imagecontainerburbs').fadeIn(); 
     } 
    }); 
});