如果预加载程序无法加载内容

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(); 
     } 
    }); 
});