I'd like to have an interval that keeps track of what items are being loaded on the current page. For example, let's say I have a page that loads a css file, a few scripts, pictures, a flash video player, and then the flash video player loads a video file. The elements loaded may or may not be from the same domain as the page. Some of them may be loaded through ajax or flash and not have a tag on the page. I want to keep track of each and make an array that stores information about them.

I'd like to have a script that does something similar to this pseudocode:

var all_external_resources = array();

setInterval(function() {
  var external_items = list_external_resources();
  for (var i in external_items) {
    if (all_external_resources.indexOf(external_items[i]) < 0)
      all_external_resources.push(external_items[i]);
  }
}, 100);

Would this be possible?

I'd like to have an interval that keeps track of what items are being loaded on the current page. For example, let's say I have a page that loads a css file, a few scripts, pictures, a flash video player, and then the flash video player loads a video file. The elements loaded may or may not be from the same domain as the page. Some of them may be loaded through ajax or flash and not have a tag on the page. I want to keep track of each and make an array that stores information about them.

I'd like to have a script that does something similar to this pseudocode:

var all_external_resources = array();

setInterval(function() {
  var external_items = list_external_resources();
  for (var i in external_items) {
    if (all_external_resources.indexOf(external_items[i]) < 0)
      all_external_resources.push(external_items[i]);
  }
}, 100);

Would this be possible?

• javascript

• We usually do this with callbacks to some function when various things get loaded. Its an asynchronous way of doing the same thing. Once you wrap your head around it, its sweet. – Lee Meador Commented Aug 9, 2013 at 23:17
• Can you maybe expand on this? – Marty Commented Aug 9, 2013 at 23:27
• If I understand the question correctly, that's not possible. You can see all requests using developer tools, but you can't monitor them with JavaScript. That's a security concern, I believe (think of third-party js code from an ad, for example). – bfavaretto Commented Aug 9, 2013 at 23:30
• Google "javascript asynchronous callback" and go read some of that stuff. Then think about your problem differently. Why do you want a list of what's loaded and what isn't? Usually its because you can't do something else until something is loaded. Or maybe you have to do something once some other thing is loaded. Then you use callbacks to do the stuff that depends on the other and don't keep a central list of what is done. For example ... – Lee Meador Commented Aug 9, 2013 at 23:39
• For example, the user might have a button to load the next image. You disable the button, load the new image and have a callback telling you when the image is done loading. The callback re-enables the button. There's no code to know whether the image is loading but the user can only click when its stable. – Lee Meador Commented Aug 9, 2013 at 23:39

1 Answer 1

You can possibly use Resource Timing to retrieve resource names:

var resources = window.performance.getEntriesByType("resource");
resources.forEach(function (resource) {
    console.log(resource.name);
});

It's an extension of Navigation Timing (Can I use...) and is supported in many browsers.