使用javascript计算多个iframe的加载时间

Question

First i create an iframe for each url i have:

$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>';
}

Then i have this javascript that should calculate the time before each frame starts loading, and the time after its loaded:

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

My problem - the beforeLoad value is the same for all iframes. This value should be different for each frame because all fames dont start loading at the exact same time. Any suggestions?

Answer 1

write first div using php then remaining using your javascript code

var curFrame = 1;
var totalIFrame = 2;
var url = new Array('http://www.abc.com','http://www.xyz.com');

var beforeLoad = (new Date()).getTime();
var result = 0;

function addTime() {
    var afterLoad = (new Date()).getTime();
    result += ((afterLoad - beforeLoad) / 1000);

    if(totalIFrame==curFrame){// number of iframe you will be loading
        $(this).parent().find('div.loadingtime').html(result);
    } else {
        $('.frame_container').append('<iframe  "width="200" height="200" id="myiframe" src="'+url[curFrame]+'" onload="addTime()">  </iframe>');
    }

    curFrame++;
}