Parsing pending external resources in javascript at runtime of an html page?

Question

Question:

How can I calculate the total number of incomplete resources generated by a page in javascript?

GetEntriesByType Here's a quick snippet of a page with some images and http requests:

<div id="results"></div>
<img src="http://placekitten.com/g/200/100" alt=""/>  //resource 1
<img src="http://placekitten.com/g/240/500" alt=""/>  //resource 2
<img src="http://placekitten.com/g/210/300" alt=""/>  //resource 3
<img src="http://placekitten.com/g/500/300" alt=""/>  //resource 4
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>  //resource 5
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>  //resource 6
<script>
  var results = document.getElementById('results');
  var r = new XMLHttpRequest();
  r.open("GET", "http://www.filltext.com?rows=10&f={firstName}", true);
  r.onreadystatechange = function () {
    if (r.readyState != 4 || r.status != 200) return;
    var data = JSON.parse(r.responseText);
    for (i = 0; i < data.length; i++) {
      results.innerHTML += '<li>' + data[i].f + '</li>'
    }
  };
  r.send(); //resource 7
  var hey = window.performance.getEntriesByType("resource");
  console.log(hey);  //returns 0 :( which I hope would be 7 before dom renders.
</script>

Answer 1

+1 for @Jaromanda.

Try the following:

setTimeout(function(){
  var hey = window.performance.getEntriesByType("resource");
  console.log(hey);
}, 0);

http://jsfiddle.net/8bgwma8n/1/