Jquery .load loads page slowly

Question

I am using this code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false }); // This part addresses an IE bug. without it, IE will only load the first number and will never refresh
setInterval(function() {
$('.container').load('dashboard.php');
}, 10000); // the "3000" here refers to the time to refresh the div. it is in milliseconds.
});
// ]]></script>

<div class="container"><h3>Loading Dashboard...</h3></div>

to reload a webpage every X Seconds but on the first load it seems to take a while to load/display

if i type the page name in the address bar (domain.com/dashboard.php) it loads instantly

is there any way to make it load quicker?

Answer 1

setInterval waits for the defined number of milliseconds before it calls the function for the first time. So either set the content of .container on the server side (using php) instead of 'Loading Dashboard...' or load the content on page load:

function reloadContainer() {
    $('.container').load('dashboard.php');
}
setInterval(reloadContainer, 10000);