title: Getting the load time of each iframe with multiple sources
body: <p>I am trying to get the loadtime of each iframe, and then display the time. Here is the code i currently have (without the loading time calculations):</p>
  
  <pre><code>&lt;iframe id="1"  width="100" height="100" src=""&gt;&lt;/iframe&gt;
  
  &lt;script type="text/javascript"&gt;
  $(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());
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>It puts links from an array into an iframe, loading each iframe one after another. </p>
  
  <p>This is how i used to do get loading time before:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  beforeload = (new Date()).getTime();
  function pageloadingtime(i)
  {
  
      var afterload = (new Date()).getTime();
      var seconds = (afterload-beforeload)/1000;
      document.getElementById("loadingtime"+i).innerHTML = seconds;
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>This method didnt work for me because it loaded all the iframes at the same time, instead of loading one by one. </p>
  
  <p>How do i use the 2nd codes methods of counting and displaying the loadtimes of iframes, in the 1st code?</p>