Получение времени загрузки каждого iframe с несколькими источниками

Question

Я пытаюсь получить время загрузки каждого iframe, а затем отображать время. Вот код, я в настоящее время (без расчетов времени загрузки):

<iframe id="1" width="100" height="100" src=""></iframe> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    var array = ['http://www.example1.com', 'http://www.example2.com', 'http://www.example3.com']; 
    $('#1').on('load', function() {     
     $('#1').attr('src', array.pop());    
    }).attr('src', array.pop()); 
}); 
</script> 

Это помещает ссылку из массива в IFRAME, загружая каждый IFrame один за другим.

Это, как я имел обыкновение делать получить время загрузки перед:

<script type="text/javascript"> 
beforeload = (new Date()).getTime(); 
function pageloadingtime(i) 
{ 

    var afterload = (new Date()).getTime(); 
    var seconds = (afterload-beforeload)/1000; 
    document.getElementById("loadingtime"+i).innerHTML = seconds; 
} 
</script> 

Этот метод не работал для меня, потому что она загрузила все плавающие фреймы в то же время, вместо загрузки по одному.

Как использовать 2-й код для подсчета и отображения нагрузок iframe в 1-м коде?

Answer 1

Как об этом:

$(document).ready(function(){ 
var array = ['http://www.example1.com', 'http://www.example2.com', 'http://www.example3.com']; 
var beforeLoad = (new Date()).getTime(); 
var loadTimes = []; 
$('#1').on('load', function() { 
    loadTimes.push((new Date()).getTime());     
    $('#1').attr('src', array.pop()); 
    if (array.length === 0) { 
     $.each(loadTimes, function(index, value) { 
      alert(value - beforeLoad); 
     }); 
    } 
}).attr('src', array.pop()); 
}); 

Sidenote Вы должны быть уверены, что вы можете получить доступ к веб-сайты вы проверяете с помощью IFRAME, потому что большинство сайтов в настоящее время запрещает плавающие фреймы. , если вы все еще хотите измерять нагрузки без iframe и использовать javascript, вы можете использовать $.get запросы для имитации одной и той же вещи.