Javascript獲取每個iframe源的加載時間

Question

我得到一個代碼，它從文本文件中讀取URL並將它們放入一個接一個的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()); 
}); 

問題在這裏 - 加載時間之前。我無法弄清楚如何在EACH 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()); 
    }); 

不知道我在那裏做了什麼，但是這對我有用，現在就去分析一下。在每個頁面的加載時間之前，我已經對這些商店進行了正確的排列。

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