Preloading Ajax content help needed!

Hi there.

I’ve been having a lot of trouble the last week dealing with loading in some content the way I’d like through Ajax using jQuery.

I have the basic functionality fine, with the remote .html being loaded in when a navigation link is clicked.

This can be viewed here [url]http://www.ascent-interactive.co.uk/testing/DEV.html[/url] (only the top nav links work at present).

However, what I have been trying to achieve is,

1.) To preload the remote .html content (with an appropriate animated .gif being displayed).

2.) And once the external content has preloaded, display it with a jQuery effect, such as fadeIn.

My code at present, which only achieves loading the content in, is as follows:

<script type=”text/JavaScript”>
$(document).ready
(
function()
{
$(“ul.navigation a”).click
(
function()
{
$(“.overlay_layer”).load(jQuery(this).attr(“href”));
return false;
}
);
}
);
</script>

Any help about how to achieve the preloading, would be greatly, greately appeciated, as I’m completely lost about how to achieve this.

Thanks in advance

Also in #JavaScript _↴