Question

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

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

Answer 1

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