Javascript page loading time with iframes

Question

I have this simple javascript that gives me loading time of an url:

var beforeLoad = (new Date()).getTime();
$('#myiframe').one('load', function() {
    var afterLoad = (new Date()).getTime();
    var result = (afterLoad - beforeLoad) / 1000;
    $("#loadingtime").html(result);
});

#myiframe = id of an iframe, #loadingtime = div where i store the result.

Heres the rest of the code:

<?php $url = 'example.com'; ?>
<iframe width="200" height="200" id="myiframe" src="http://www.<?php echo $url;?>"></iframe>
<div id="loadingtime"></div>

This works all well for when i have only 1 url. I want to have an array of urls:

$url = array();
$url[] = 'example1.com';
$url[] = 'example2.com';

and then make it so it would load 1st url, calculate loadtime, load next url from the array and calculate loadtime of that url and so on. Any suggestions how i do it?

Answer 1

PHP

$url = array();
$url[] = 'example1.com';
$url[] = 'example2.com';

foreach($url as $u){
   echo '<div class="frame_container">
            <iframe width="200" height="200" id="myiframe" src="http://www.'.$u.'"></iframe>
            <div class="loadingtime"></div>
         </div>';
}

Javascript

var beforeLoad = (new Date()).getTime();
$('.frame_container iframe').on('load', function() {
    var afterLoad = (new Date()).getTime();
    var result = (afterLoad - beforeLoad) / 1000;
    $(this).parent().find('div.loadingtime').html(result);
});