Ajax reload DIV, execute immediately - ajax

Question

I have the following script, it reloads the forum topics every 3 seconds but I also want it to load as soon as the page loads, so that there is no delay the first time. The first time the page loads it takes 3 seconds before the topics show up.
Can anyone help me with this?
Thanks in advance.
<script type="text/javascript">
window.onload = function(){
function foo()
{
$('#forum').load('forum.php').fadeIn("slow");
} // refresh every 10000 milliseconds
setInterval(foo, 3000);
}
</script>

Answer 1

That is because you are waiting on the .onload event, which is fired when all resources/assets (like images) have been downloaded by the browser — this delay will be significant on bloated or resource-heavy sites, which will make a lot of HTTP requests and does not fire the onload event as early as you wish.
The solution? You should instead fire foo on DOM ready:
$(function() {
var foo = function() {
$('#forum').load('forum.php').fadeIn("slow");
}
// Will execute on DOM ready
foo();
setInterval(foo, 3000);
});
Note that $(function() {...}) is the equivalent of $(document).ready(function() {...}) in jQuery.
If you wish to also forcibly fire foo() when all resources are loaded up, just fire it again with:
$(function() {
var foo = function() {
$('#forum').load('forum.php').fadeIn("slow");
}
// Will execute on DOM ready
foo();
setInterval(foo, 3000);
// Also execute on window load
$(window).load(foo);
});