Here's a basic example. I'll set up a live test page and post a link later.
Code:
<div>
<div id="content">...</div>
<div id="loading"><div class="vcenter"><img src="/images/loading" alt="loading..."/></div></div>
</div>
<script type="text/javascript">
$('#loading')[0].fadeSpeed=500;
function loadContent(url) {
url =url.replace(/.*(#|\?page=)/, contentBase);
var loading = $('#loading');
var start = new Date;
loading.fadeIn(loading[0].fadeSpeed);
$('#content').load(url, function() {
loading.stop(true, true);
loading.fadeOut(Math.min(loading[0].fadeSpeed, (new Date) - start));
});
return false;
}
</script>
Keep in mind that AJAX isn't always appropriate for a web page:
A big issue with AJAX is that it won't work with user agents that don't support JS (e.g. Lynx, search engine spiders, screen readers and browsers w/ js disabled). It also breaks browser history and bookmarking.
Note the above always displays the "loading" panel, even if the content loads very quickly. It's possible to have other behaviors (such as canceling the fadein if the content loads quickly), but it's a little trickier.
Edit: Live
loading fadein/out page is now available. To simulate network load, the "About" page has a 3 second delay.
"Bio" and "About me" are really the same thing. Having both pages seems terribly self-involved. You should drop one of them.
Examine the source to see one way to achieve graceful degradation when JS isn't supported or enabled. History and bookmarking aren't supported. The one thing you won't see in the source is the following bit of PHP:
PHP:
<div id="main">
<div id="content"><?php
function setContent($page) {
if (file_exists($url="content/${page}.html")) {
include($url);
throw new Exception();
}
}
try {
if (isset($_REQUEST['page'])) {
setContent($_REQUEST['page']);
}
if (isset($_SERVER['PATH_INFO'])) {
$url=explode('/', $_SERVER['PATH_INFO']);
setContent($url[0]);
}
setContent('welcome');
} catch (Exception $e) {
}
?>
<!--#content--></div>
<!--#main--></div>
Edit 2: There's now an alternate
version supporting bookmarking and history. It relies on a
patched version of
jQuery history plugin. The above implementation of loadContent has been changed to reflect the new page.
If you want to download everything to disect and play with, get the
zipped source archive.
