How can I show a spinner while loading images from Flickr?

Question

I'm using jquery.flickr-1.0.js to search flickr for images in my application. The problem i'm facing is that sometimes it takes a few seconds for flickr to respond with results and i want to load a spinning gif in place of my search button 'btnRefresh' until the results are returned. How can I accomplish this?

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

I'm not familiar with the flickr() method you reference above, but generally the approach to these sorts of things is that you show the gif before you make the call and then hide it when the call completes. It does not look like the code above is asynchronous, so my approach would be to put a gif next to the btnRefresh with an id of 'imgLoading'. Make the first line something like $('imgRefresh').hide(); In your click handler, wrap the function in with

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

and

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

It's not the most sophisticated approach, but you know... keep it simple and that sort of stuff.

The problem will be, if it's not asynchronous, what do you do for timeouts? The refresh button could be forever hidden. You might consider setting a timer to ensure that a useable state is presented to the user (and if you want to get fancy, a msg saying that the script appears to be timing out).

Answer 2

the flickr plugin supports a callback property in its options. So, you could just display the spinner before calling flickr and then in the callback hide it.

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

That ought to do it... assuming you have something in your page called spinner that is by default hidden.

Answer 3

First - Go here and create a spinning gif or png - http://ajaxload.info/

Second - Save the spinner in your images dir - ./images/ajax-loader.gif

Third - add one div to your html where the spinner will be located on the page, let's say

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

Fourth - Add two lines to your existing code.

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