If pre loader fails to load content

We fetch some image data from Picasa, using yoxview and whilst the data is being fetched, which are image thumbnails.

We display a preloader image.

Now, the data is fetched dynamically, and at times the fetch url we are requesting parses no results. So the Image preloader for the div, keeps whirring away .. basically because the data has failed to load.

So my question is this, if no result is found within say 5 seconds, whilst the preloader is being displayed, can we initiate a timeout, and display a placeholder image overlaying the preloader, with say message .. unable to fetch feed content at this time ??

Our code is like this:

$(document).ready(functi开发者_JS百科on(){
    $("#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();
                }
            });
        });

As you can see, we use a nifty piece of php to propagate the data url, from our database.

Essentially the data is fetched like this.

url : picasa.google.com/lh/view? and we apend the query suburb and state to the url.

So if when we ping picasa for a random result, and it has no results .. currently the loader animation continuously displays, what I need to do is if no data is fetched, initiate a placeholder that states, Unable to Fetch Data at this time or whatever.

Any suggestions?

Edit/Update Given the suggestion below, should I add my code like this?

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

I don't see any sort of timeout option in the yoxview documentation. If they have a timeout internally, it would probably trigger the handlers onLoadError or onLoadNoData. You can start by using handlers for those and see if it either gets called. You may also look at the source and see if they are using any timeouts.

If not, you could implement your own.

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

Ok we figured it out, quite bloody simple actually.

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');
                },