CODEWITHSUNDEEP
javascriptpartial-page-refresh
user3846962
user3846962

Reputation: 51

How do I fix a page refresh that causes the page to be blank on initial load for the same duration as refresh interval?

I would like to create a page that updates its content at a regular interval (e.g. every 10 seconds).

I have the following code which works, but it also results in the page being blank for 10 seconds upon the initial page load. 

<html>
    <head>
        <script>  
            window.setInterval("refreshDiv()", 10000);  
            function refreshDiv() {   
                document.getElementById("test").innerHTML = "<iframe src='website' style='width:100%; height:100%;'></iframe>";  
            }  
        </script>  
    </head>
    <body>
        <div id="staticBlock">  
            text
        </div>
        <div id="test" style="width:100%; height:100%; border:1px solid #000;">

        </div>
    </body>
</html>

How can I have the content load instantaneously, and also refresh it every 10 seconds using this code?

Upvotes: -2

Views: 656

Answers (3)

David Refoua
David Refoua

Reputation: 3617

If you don't want to use Ajax, A better idea is to wrap function refreshDiv() in a (), like this:

<script>
    window.setInterval(refreshDiv, 10000); // You can also directly point to the function
    (function refreshDiv(){
        document.getElementById("test").innerHTML = "<iframe src='website' style='width:100%; height:100%;'></iframe> ";  
    })();
</script>

Upvotes: 0

Patrik Oldsberg
Patrik Oldsberg

Reputation: 1550

Set refreshDiv to be called after the site has loaded.

<script>  
    window.setInterval("refreshDiv()", 10000);  
    function refreshDiv(){   
        document.getElementById("test").innerHTML = "<iframe src='website' style='width:100%; height:100%;'></iframe> ";  
    }  
    window.addEventListener('load', refreshDiv);
</script>

Upvotes: 0

Dave Zych
Dave Zych

Reputation: 21897

Call refreshDiv() after it's declared.

<script>  
    window.setInterval("refreshDiv()", 10000);  
    function refreshDiv(){   
        document.getElementById("test").innerHTML = "<iframe src='website' style='width:100%; height:100%;'></iframe> ";  
    }  
    refreshDiv();
</script>

Upvotes: 0

Related Questions