CODEWITHSUNDEEP
phpjavascript
user1894929
user1894929

Reputation: 199

Javascript function returning just 1 value instead of an array of values

I am trying to find out page loading time by using iframes. I have an array of urls, that i put into an array of iframes, and then i get the loadtime of each iframe by using javascript. My problem - my time values is not an array, so it just shows 1 value (it shows value of 1st frame then second later it replaces it with value of 2nd frame on top of it).

   <html>
    <body>   
    <center>
    <?php 
    $url = array('example.com', 'example2.com');
    foreach($url as $i){ 
    ?>
    <iframe onload="pageloadingtime();" width="505" height="505" scrolling="no" security="restricted" src="<?php echo "http://www.".$i; ?> "></iframe>
    <?php
    } 
    ?>
    <div id="loadingtime"></div>
    </center>
    </body>
    <script type="text/javascript">    
    beforeload = (new Date()).getTime();
    function pageloadingtime()
    {
        afterload = (new Date()).getTime();
        secondes = (afterload-beforeload)/1000;
        document.getElementById("loadingtime").innerHTML = "<font color='red'>(Page took " + secondes + " seconds to load)</font>";
    }   
    </script>
    </html>

In this code i make an array of urls ($url), run a foreach cycle making as many iframes as there are urls, and then using javascript i count the page loading time. After i get the loading time i put it into the "loadingtime" div. But like i said it only puts 1 value instead of putting an array of values.

changed it to this, but now its not displaying anything:

beforeload = (new Date()).getTime();
function pageloadingtime()
{
    var afterload = (new Date()).getTime();
    secondes = (afterload-beforeload)/1000;
    document.getElementById("loadingtime1").innerHTML += "<font color='red'>(Page took " + secondes + " seconds to load)</font><br>";
}

Upvotes: 0

Views: 82

Answers (1)

bfavaretto
bfavaretto

Reputation: 71908

Append to the status div instead of overwriting it:

document.getElementById("loadingtime").innerHTML += "<font color='red'>(Page took " + secondes + " seconds to load)</font><br>";

Also, declare afterLoad and secondes as local to the function:

var afterload = (new Date()).getTime();
var secondes = (afterload-beforeload)/1000;

Upvotes: 1

Related Questions