Question

我有一个代码，它从文本文件中读取网址并将它们一个接一个地放在iframe中。我想计算每页的加载时间。我这样做是通过标记iframe开始加载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());
});

问题在这里 - 加载时间之前。我无法弄清楚如何标记每个网址开始加载之前的时间。在上面的代码中，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());
    });

不确定我在那里做了什么，但这对我有用，现在就分析一下。我在每个页面的加载时间之前创建了一个正确的存储数组。

Answer 1

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

Answer 2

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

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

Answer 3

试试这个

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

Answer 4

  $.get("text.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());
    });

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

4 个答案: