获取每个iframe源的加载时间的Javascript

我得到了一个从文本文件读取URL的代码，并将它们一个接一个地放入iframe中。我想计算每个页面的加载时间。我通过标记iframe开始加载url之前的时间，以及在加载url之后的时间来实现这一点。加载后减去加载前给出了每页的加载时间

    $.get("text.txt", function (data) {
        var array = data.split(/\r\n|\r|\n/) 
        var beforeLoad = (new Date()).getTime();    
        var loadTimes = [];
    $('#1').on('load', function () {
        loadTimes.push((new Date()).getTime());           
        $('#1').attr('src', array.pop()); 
            $.each(loadTimes, function (index, value) {             
                var result = (value - beforeLoad) / 1000;       
                $("#loadingtime" + index).html(result);
            }); 
    }).attr('src', array.pop());
});

var loadTimes = {};
$('#1').data('time', (new Date()).getTime()).on('load', function() {
  var $this = $(this), time = (new Date()).getTime();
  loadTimes[$this.attr('src')] = time - $this.data('time');
  $this.data('time', time);
  if (array.length == 0) {
    //end of load loadTimes contents with time of load each url
  } else $this.attr('src', array.pop());
}).attr('src', array.pop());

这里的问题-在加载时间之前。我不知道如何标记每个url开始加载之前的时间。在上面的代码中，beforeload值是加载所有源之前的时间值，我希望它在每次将新源放入iframe时都会更改。有什么建议吗

编辑：修正了

   $.get("imones.txt", function (data) {
        var array = data.split(/\r\n|\r|\n/) 
        var beforeLoad = (new Date()).getTime();    
        var loadTimes = [];
            var beforeTimes = [];               
        $('#frame_id').on('load', function () {                                 
            beforeTimes.push(beforeLoad);
            loadTimes.push((new Date()).getTime()); 
            $('#frame_id').attr('src', array.pop());
                $.each(loadTimes, function (index, value) { 
                    var result = (value - beforeTimes[index]) / 1000;
                        if (result < 0) {
                            result = result * (-1);
                        }   
                    $("#loadingtime" + index).html(result);
                    beforeLoad = value;
                });
        }).attr('src', array.pop());
    });

$.get（“imones.txt”，函数（数据）{
var array=data.split（/\r\n |\r |\n/）
var beforeLoad=（新日期（））.getTime（）；
var loadTimes=[]；
var beforeTimes=[]；
$（'#frame_id'）。在（'load'，函数（）{
beforeTimes.push（加载前）；
loadTimes.push（（new Date（））.getTime（））；
$（'#frame_id'）.attr（'src'，array.pop（））；
$.each（加载时间、函数（索引、值）{
var结果=（值-之前时间[指数]）/1000；
如果（结果<0）{
结果=结果*（-1）；
}   
$（“#加载时间”+索引）.html（结果）；
加载前=值；
});
}).attr（'src'，array.pop（））；
});

---

不知道我在那里做了什么，但这对我来说很有效，我现在要分析一下。我制作了一个数组，在每个页面的加载时间之前存储正确。

临时存储新的加载前时间，计算上次加载时间，复制新的加载前时间

    $.get("text.txt", function (data) {
        var array = data.split(/\r\n|\r|\n/) 
        var beforeLoad = (new Date()).getTime();    
        var loadTimes = [];
    $('#1').on('load', function () {
        loadTimes.push((new Date()).getTime());           
        $('#1').attr('src', array.pop()); 
            $.each(loadTimes, function (index, value) {             
                var result = (value - beforeLoad) / 1000;       
                $("#loadingtime" + index).html(result);
            }); 
    }).attr('src', array.pop());
});

var loadTimes = {};
$('#1').data('time', (new Date()).getTime()).on('load', function() {
  var $this = $(this), time = (new Date()).getTime();
  loadTimes[$this.attr('src')] = time - $this.data('time');
  $this.data('time', time);
  if (array.length == 0) {
    //end of load loadTimes contents with time of load each url
  } else $this.attr('src', array.pop());
}).attr('src', array.pop());

$.get("text.txt", function (data) {
  var array = data.split(/\r\n|\r|\n/); 
  var beforeLoad = (new Date()).getTime();    
  var loadTimes = [];

  $('#1').on('load', function () {

    var nextBeforeLoad = (new Date()).getTime();
    loadTimes.push(nextBeforeLoad);       

    $.each(loadTimes, function (index, value) {             
        var result = (value - beforeLoad) / 1000;       
        $("#loadingtime" + index).html(result);
      }); 

    beforeLoad = nextBeforeLoad;
    $('#1').attr('src', array.pop()); 

  }).attr('src', array.pop());
});

---

临时存储新的预加载时间，计算上次加载时间，复制新的预加载时间

$.get("text.txt", function (data) {
  var array = data.split(/\r\n|\r|\n/); 
  var beforeLoad = (new Date()).getTime();    
  var loadTimes = [];

  $('#1').on('load', function () {

    var nextBeforeLoad = (new Date()).getTime();
    loadTimes.push(nextBeforeLoad);       

    $.each(loadTimes, function (index, value) {             
        var result = (value - beforeLoad) / 1000;       
        $("#loadingtime" + index).html(result);
      }); 

    beforeLoad = nextBeforeLoad;
    $('#1').attr('src', array.pop()); 

  }).attr('src', array.pop());
});

试试这个

var links = [
    'http://google.com',
    'http://yahoo.com'
]

$(links).each(function (i) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('t1', (new Date()).getTime());
    iframe.setAttribute('src', links[i]);
    iframe.onload = function () {
        var t2 = (new Date()).getTime();
        console.log('Load Time: ' + ( t2 - parseInt(this.getAttribute('t1'))));
    }
    document.body.appendChild(iframe);
});

试试这个

var links = [
    'http://google.com',
    'http://yahoo.com'
]

$(links).each(function (i) {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('t1', (new Date()).getTime());
    iframe.setAttribute('src', links[i]);
    iframe.onload = function () {
        var t2 = (new Date()).getTime();
        console.log('Load Time: ' + ( t2 - parseInt(this.getAttribute('t1'))));
    }
    document.body.appendChild(iframe);
});

$.get（“text.txt”，函数（数据）{
var array=data.split（/\r\n |\r |\n/）
var beforeLoad=（新日期（））.getTime（）；
var loadTimes=[]；
var beforeTimes=[]；
$（'#frame_id'）。在（'load'，函数（）{
beforeTimes.push（加载前）；
loadTimes.push（（new Date（））.getTime（））；
$（'#frame_id'）.attr（'src'，array.pop（））；
$.each（加载时间、函数（索引、值）{
var结果=（值-之前时间[指数]）/1000；
如果（结果<0）{
结果=结果*（-1）；
}   
$（“#加载时间”+索引）.html（结果）；
加载前=值；
});
}).attr（'src'，array.pop（））；
});

$.get（“text.txt”，函数（数据）{
var array=data.split（/\r\n |\r |\n/）
var beforeLoad=（新日期（））.getTime（）；
var loadTimes=[]；
var beforeTimes=[]；
$（'#frame_id'）。在（'load'，函数（）{
beforeTimes.push（加载前）；
loadTimes.push（（new Date（））.getTime（））；
$（'#frame_id'）.attr（'src'，array.pop（））；
$.each（加载时间、函数（索引、值）{
var结果=（值-之前时间[指数]）/1000；
如果（结果<0）{
结果=结果*（-1）；
}   
$（“#加载时间”+索引）.html（结果）；
加载前=值；
});
}).attr（'src'，array.pop（））；
});

这里的代码示例有一些错误。第一个函数定义函数（数据）{never closesthanks i eddit postFYI、ID和NAME标记必须以字母（[a-Za-z]）开头嗯，我会更改它，但这不是我代码中的问题，功能正常，但我无法获得每个源的加载前时间..我可以获得每个源的加载后时间，但无法获得加载前时间您可以共享更多源吗？不清楚id“#1”引用的是什么，以及您实际在哪里创建iFram在第一个“加载”事件侦听器中使用新url重置src属性时，它是否只是一个iframe并不断触发新加载？这里的代码示例有一些错误。第一个函数定义函数（数据）{never closesthanks i eddit postFYI、ID和NAME标记必须以字母（[a-Za-z]）开头嗯，我会更改它，但这不是我代码中的问题，功能正常，但我无法获得每个源的加载前时间..我可以获得每个源的加载后时间，但无法获得加载前时间您可以共享更多源吗？不清楚id“#1”引用的是什么，以及您实际在哪里创建iFram当你在第一个“加载”事件监听器中用新的url重置src属性时，它是否只是一个iframe并不断触发一个新的加载？如果你想有加载时间的普通数组，请使用

loadTimes.push（time-$this.data（'time'））

而不是

loadTimes[$this.attr（'src'）]=time-$this.data（'time'））

如果您想使用具有加载时间的普通数组，请使用

loadTimes.push（time-$this.data（'time'））

而不是

loadTimes[$this.attr（'src'）]=time-$this.data（'time'）