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

Question

首先，我为我拥有的每个 url 创建一个 iframe：

$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 应该计算每个帧开始加载之前的时间，以及加载之后的时间：

$(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);
});
}

我的问题 - 所有 iframe 的 beforeLoad 值都是相同的。每个帧的此值应该不同，因为所有名声不会在完全相同的时间开始加载。有什么建议么？

Answer 1

使用 php 编写第一个 div，然后使用您的 javascript 代码编写

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++;
}