I'm looking to inject some pure JavaScript (no jQuery please) into a website to determine when all of the resources (HTML, CSS, scripts, images etc.) have fully loaded. The website uses AJAX, so a simple load event listener isn't enough due to all of the external resources being loaded by XMLHttpRequests.
None of the questions I've found on StackOverflow have been helpful because they all use jQuery and this website does not use jQuery, limiting my approach to pure JavaScript only.
One approach I've considered is tracking when images are done loading but a) I don't know if images loaded via Ajax can be tracked this way and b) I'm not sure how I'd go about tracking this. Any help is appreciated!
This isn't possible.
You cannot know when the code is done loading resources. At least, not without making assumptions about the site or knowing how it's built. More AJAX requests can be made at any time by various scripts. There's no standard for notifying when it's done.