AJAX Preloader

[sarahA]

Anyone know of a tutorial or script that I can use to create an ajax preloader? I've got a div with info in, controlled by a tab system (so click the tab and it'll show the info under it without refreshing the page). However there's a delay between the page loading and the initial tab displaying, all of 2 seconds or so but the client won't like that.

I've had a look around but can't find a simple tutorial/script to use that will allow me to have a nice little animated 'loading' image in the white space until the data is loaded.

tia

[sarahA]

Found a non ajax solution to this.

[samhs]

I'd be interested to see what you came up with Sarah, if you're so inclined.

[Rosco]

did the initial tab need ajax anyway?  Couldn't it's content just be part of the initial genrated page, with the other tabs loading in content via ajax if/when the user wants to see them?

[sarahA]

Rosco, wouldn't know. I'm not really into Ajax (yet) so I don't know much about it, just hacked apart a tutorial on it. I'm still stuck on how to prevent everything from displaying on the page load (before collapsing) without using document.write. I tried to use style.display = 'none' on the element ID but that didn't work.

Sam, I had a table loading into the content area for each tab. So what I did was place an absolutely positioned 'loading' image in the div and set the z-index to 0, then gave the div holding the table a background of white (as opposed to see through) and made that position relative. So at first the loading gif would show and as soon as the table loaded it sat on top, covering the loading image. Probably not the best way but it worked.

Annoying though, the site also has drop down menus and IE7's dropdowns go under any div with a position. But luckily the client spotted this and said the loading animation wasn't essential (after all that!). Shame as it looks better with it, but I don't have a clue how to get the menus to sit over a positioned div.

[keri]

i use simple loader images from ajaxload.info with a little js script i knocked up for pages i knock up that need loaders e.g. http://www.topofthewardrobe.com/light2/

if you are using tabs to swap divs, it would be easier not to use ajax, load all the info onscreen at once and use js to swap them over, this wouldn't need any loaders.

something like

Code:

<div id="tab1">
blah blah blah
</div>
<div id="tab2" style="display:none;">
blah blah blah
</div>
<div id="tab3" style="display:none;">
blah blah blah
</div>
<div id="tab4" style="display:none;">
blah blah blah
</div>

and have an onclick along the lines of onClick="show(2)"
where

Code:

function show(foo)
{
for(i=1;i<=4;i++)
{
document.getElementById("tab"+i).style.display='none';
}
document.getElementById("tab"+foo).style.display='inline';
}

That code is untested and written straight in here, so i apologise for any dumb ass mistakes, but it should give you the jist of the method i've used i the past

Keri.

[sarahA]

Keri, cheers for the rely. The site and tabs are now live so it's not much of an issue now. I don't think I used ajax for the tab system. I used dom tabs which has done the job fine. it just seems like the browser waits for all of the elements on the page to load before displaying the data. If I knew how to say something like display none, swiftly followed by display the first tab, in JS then that could fix the issue, but it's all beyond me right now plus the client is happy so I'll look for a way to do this when I've got the time