Si le chargeur ne parvient pas à charger le contenu

Question

Nous récupérons des données d'image à partir de Picasa, en utilisant yoxview et pendant le chargement des données, qui sont des miniatures d'image.

Nous affichons une image de préchargement.

Maintenant, les données sont récupérées dynamiquement, et parfois l'URL d'extraction que nous demandons analyse pas de résultats. Donc, le préchargeur d'image pour le div, continue de tourner ... essentiellement parce que les données ont échoué à charger. Donc, ma question est la suivante: si aucun résultat n'est trouvé dans les 5 secondes, alors que le préchargeur est affiché, peut-on lancer un timeout, et afficher une image de l'espace réservé recouvrant le préchargeur, avec un message .. impossible d'aller chercher nourrir le contenu en ce moment ??

Notre code est comme ceci:

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

Comme vous pouvez le voir, nous utilisons un morceau astucieux de php pour propager l'url de données, de notre base de données.

Essentiellement, les données sont récupérées comme ceci.

url: picasa.google.com/lh/view? et nous avons passé la requête banlieue et l'état à l'URL. Donc, si nous ping ping picasa pour un résultat aléatoire, et il n'a aucun résultat .. actuellement l'animation du chargeur affiche en permanence, ce que je dois faire est si aucune donnée n'est récupérée, initier un espace réservé qui indique, Impossible d'aller chercher Données à ce moment ou quoi que ce soit.

Des suggestions?

---

Modifier/Mettre à jour Compte tenu de la suggestion ci-dessous, dois-je ajouter mon code comme ça?

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

Ok, nous avons compris, assez sanglante en fait.

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

Je ne vois aucune sorte d'option de délai dans la documentation yoxview. Si elles ont un délai d'attente en interne, cela déclencherait probablement les gestionnaires onLoadError ou onLoadNoData. Vous pouvez commencer en utilisant des gestionnaires pour ceux-ci et voir si elle est soit appelée. Vous pouvez également regarder la source et voir si elles utilisent des délais d'attente.

Sinon, vous pouvez implémenter le vôtre.

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