javascript - How to detect when one or more JS/CSS library fail to load (e.g. CDN)? -

premise: i've found these 2 answers don't understand how can sistematically apply many libraries:

detect , log when external javascript or css resources fail load

html if statement load local js/css upon cdn failure

i've augular 1.x application depends on several libraries, many of them hosted on cdn or external server. unfortunately when user offline, internet connection doesn't work or there (cdn) server problem, libraries fail download , hence load.

in case want show the user view "there error. please reload or try later".

my doubts is: given library loaded (some of them asynchronously) in index.html by:

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.css"> 

for css (within head) and

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.min.js"></script> 

for js (at end of body)

how can detect down(loading) failure of 1 single library? (in fact, let's fails load angular's because of connection error, whole app won't work. i've several mandatory libraries)

or should give priority reliability(i.e. loading libraries locally) on performance (i.e. cached cdn)? also, think it's important precise libraries (e.g. google apis) can't downloaded or installed via bower.

just add onerror handler tag. can call fallback, give user message etc.

example

using non-existing url here pop alert:

<link      onerror="alert('woa, error')"      rel="stylesheet"      href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.cssx"   >

for custom function, define script block in header before link tags can call custom function:

<script>    function myfunction() {alert("whaaaa.."); /* or more meaningful */}    </script>    <link      onerror="myfunction()"      rel="stylesheet"      href="//ajax.googleapis.com/ajax/libs/angular_material/0.8.2/angular material.min.cssx"   >