Facebook Applications & Animated Loading Gif

Question

I am working to develop a facebook application and am running into a small snag. When making a ajax call I want to let the user know that the application is loading.

My confusion is that others say facebook does not allow animated gifs however the above application has an animated gif. I scoured through their source code to no avail. Any thoughts on how to get animated gifs to play in a facebook application would be great.

<script type="text/javascript">
function search_ajax()
{
    document.getElementById('loading').setStyle('display', 'block');
    var ajax = new Ajax();
    ajax.responseType = Ajax.FBML;
    ajax.ondone = function(data) {
        document.getElementById('search_results').setInnerFBML(data);
        document.getElementById('loading').setStyle('display', 'none');
    }
    var queryParams = { "VSearchMake" : document.getElementById('VSearchMake').getValue(),
    "VSearchModel" : document.getElementById('VSearchModel').getValue(),
    "VSearchYear" : document.getElementById('VSearchYear').getValue(),
    "VSearchPrice" : document.getElementById('VSearchPrice').getValue(),
    "ShowNewUsed" : document.getElementById('ShowNewUsed').getValue()   };
    ajax.post('http://domainname/facebook/results.cfm', queryParams);
}

</script>

<img src="http://domainname/images/loading.gif" id="loading" style="display:none;" />

Answer 1

You mean the animated blue bars? I'd bet that's not an animated gif, but some JavaScript stuff going on. Given that I've seen it on many sites, I'd look for a corresponding JS function in the Facebook API. Sorry for not giving a more complete answer, but maybe this points you into the right direction.

Answer 2

I have used animated gifs in my apps. Basically you setup the gif in image tag and hide it initially on page load like this:

<img src="http://example.com/images/mygif.gif" style="display:none;" id="wait">

And when the ajax request is sent, you unhide the image:

document.getElementById('wait').setStyle('display', 'block');

And once you get the success respones from ajax, you hide it again:

document.getElementById('wait').setStyle('display', 'none');

Update:

You are not hiding it back, use this code instead:

ajax.ondone = function(data) {
    document.getElementById('search_results').setInnerFBML(data);
    document.getElementById('loading').setStyle('display', 'none');
}