Stopping the page refresh - not working with clear function
<p>This is code to display a spinner while image is loading and then show the image when it is done. Also, this page needs to be auto-refreshed every 5 seconds and the refreshing to be stopped at 11 seconds, ie refresh twice alltogether. But this doesn't work. The spinner code is in the css file. This does not work - keeps refreshing over and over - the timeout gets reset, tried using var to assign as well no joy. Any help appreciated highly.</p>

<pre><code>&lt;META HTTP-EQUIV="Cache-Control" CONTENT="max-age=0"&gt;
&lt;META HTTP-EQUIV="Cache-Control" CONTENT="no-cache"&gt;
&lt;META http-equiv="expires" content="0"&gt;
&lt;META HTTP-EQUIV="Expires" CONTENT="Tue, 01 Jan 1980 1:00:00 GMT"&gt;
&lt;META HTTP-EQUIV="Pragma" CONTENT="no-cache"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" href="/css/graph.css" type="text/css" media="screen, projection"&gt;
&lt;script src="/javascript/jquery-latest.js" type="text/javascript"&gt;
&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    var img = new Image(); img.height=600; img.width=2000;
    $(img).load(function () {
    $(this).css('display','none');
    $(this).animate({ opacity: 0.25 }).fadeIn("slow");
    $('#loader').append(this);
    $(this).animate({ opacity: 1 })
    }).error(function () {
    }).attr('src', 'xyz.png');
    var timer = function() { window.location.reload(true);};
        window["reload_timer"] = setTimeout(timer, 5000);
    var timer2 = function() {     
        clearTimeout(window["reload_timer"]);
        clearTimeout(window["reload_timer2"]);};
        window["reload_timer2"] = setTimeout(timer2, 11000);
&lt;/script&gt;
&lt;/head&gt;
&lt;body id = "page"&gt;&lt;div id="loader" class="loading"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
