0

I would like when my page is refreshed automatically every 15 seconds, everything to be loaded once. I tried this code but it doesn't work.For example when an image is large,I do not want to see the image loading slowly,I want the page to be completely loaded(images, tables) in the background,and then to see all the changes once.Any ideas ? I tried this code but it does not work as I expected.

<script>
function autoRefresh1()
{
window.setTimeout(function(){ document.location.reload(true); }, 15000);
}
</script>

<body onLoad="autoRefresh1();">

After following the links in the comments I came to solution that solves my problem

<script type="text/javascript"
    src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
    $(document).ready(
            function() {
                setInterval(function() {
                $('#table').load("table.html");
                }, 15000);
            });
</script>

And the div inside the :

<div id="table" align="center"></div>
John Wrt
  • 77
  • 1
  • 1
  • 6
  • 1
    Sounds like you need to continue down the page refresh route as you have above but may add in some css on the enirety of your page that you unhide within a document.ready block. Something like this. :http://stackoverflow.com/questions/1435015/how-can-i-make-the-browser-wait-to-display-the-page-until-its-fully-loaded – Bill Blankenship Aug 18 '14 at 21:43
  • 1
    Look at the top voted answer to this question http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded It looks it might do what you are trying to accomplish. "Per jQuery's documentation, there are a number of caveats for using the load event with images. As noted in another answer, the ahpi.imgload.js plugin is broken, but the linked Paul Irish gist is no longer maintained. Per Paul Irish, the canonical plugin for detecting image load complete events is now at: https://github.com/desandro/imagesloaded" – Zack Aug 18 '14 at 21:45
  • Is it possible everything on the page will change? A better approach may be to just reload the content that could change. If you have a `.NET` back-end you could even look at [SignalR](http://signalr.net/) – Th4t Guy Aug 18 '14 at 21:49
  • Thanks for the links,they helped me to find a solution .. :) – John Wrt Aug 18 '14 at 23:54

1 Answers1

1

You can check to see if the page is fully loaded with the Document.readyState.

There are probably many ways to go about doing this, but I would have a CSS box overlay the entire page with a "loading" message. While the loading message is up, I would use a setInterval() to check the document.readyState. When the readystate returns complete, I would clear the initial setInterval(), hide the loading message, which would then reveal the rest of the page.