Comment est-ce que je peux montrer un fileur pendant le chargement des images de Flickr?

Question

J'utilise jquery.flickr-1.0.js pour rechercher sur flickr des images dans mon application. Le problème que je suis confronté est que parfois il faut quelques secondes pour flickr à répondre avec des résultats et je veux charger un gif en rotation à la place de mon bouton de recherche 'btnRefresh' jusqu'à ce que les résultats sont retournés. Comment puis-je accomplir cela?

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

Answer 1

Le plugin flickr prend en charge une propriété de rappel dans ses options. Ainsi, vous pouvez simplement afficher le spinner avant d'appeler flickr, puis le cacher dans le rappel.

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

Cela devrait le faire ... en supposant que vous avez quelque chose dans votre page appelée spinner qui est caché par défaut.

Answer 2

Je ne suis pas familier avec le flickr() méthode référence ci-dessus, mais en général l'approche de ce genre de choses est que vous montrer le gif avant de faire l'appel, puis le cacher lorsque l'appel se termine . Il ne semble pas que le code ci-dessus soit asynchrone, donc mon approche serait de mettre un gif à côté de btnRefresh avec un identifiant de 'imgLoading'. Faites en sorte que la première ligne ressemble à $ ('imgRefresh'). Hide(); Dans votre gestionnaire de clic, enveloppez la fonction avec

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

et

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

Ce n'est pas l'approche la plus sophistiquée, mais vous savez ... rester simple et ce genre de choses.

Le problème sera, si ce n'est pas asynchrone, que faites-vous pour les délais d'attente? Le bouton d'actualisation pourrait être caché pour toujours. Vous pourriez envisager de régler un minuteur pour vous assurer qu'un état utilisable est présenté à l'utilisateur (et si vous voulez avoir envie, un message indiquant que le script semble expirer).

Answer 3

Première - Allez ici et créer un gif de filature ou .png - http://ajaxload.info/

Deuxième - Enregistrer la fileuse dans vos images dir - ./images/ajax-loader.gif

Troisième - ajouter un div à votre html où la fileuse sera situé sur la page, disons que

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

Quatrième - Ajoutez deux lignes à votre code existant.

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