Preloading CSS and JavaScripts by injecting elements into the head or body is fine (great post here about the pros and cons of script injecting) but when it comes to monitoring for load or error events, things get a bit trickier..

The onload event has been supported for script elements for a good while now, but adding callbacks for links is only supported in modern browsers. The same goes for onerror events, which are mandatory IMO if you are going to create a robust loader.

Thankfully a lot of the leg-work has already been done for us as far as browser support is concerned.

There are a couple of workarounds, the best seems to be a technique of loading the content as the src of an image element, trapping for the error event that is raised when the browser tries to parse the content and fails. Once that happens, you can assume the content is cached, so are free to load..
Source: backalleycoder

This still incorporates a little guess-work in terms of assuming cache and how long to wait before the content is actually available, so I added a check to read the document’s style sheets, finding the item with the correct href and checking it for loaded styles. In addition, I set a timeout to catch load-fails as we don’t want the script to just keep ticking over forever..

Having mucked about with this innards of script/CSS preloading, I ended up going with YepNope as a solution (although you need to use their CSS plugin in order to correctly load webfont CSS).
My only issue with YepNope was it didn’t fit in with my grunt build, but I got around that by writing a custom task that weaved it into the usemin task.