How does one test if some javascript library was loaded succesfully from CDN?

Question

When downloading javascript files from a CDN, I'd like to provide a local fallback. It's however not always obvious to me how to test if a certain load has succeeded.

For some popular things this is well documented in other StackOverflow questions, e.g. for Bootstrap one just tests if (window.jQuery), if (window.Popper), if ($.fn.modal) for its three parts respectively. However, for other libraries this is less obvious:

For jQuery Validate, I find conflicting information: this topic suggests one can do if (window.validator), this one suggests one needs if(typeof $().validate == 'undefined'). What is the difference between these, and why would I need one over the other?
For less popular libraries, e.g. balanceText, how should I find out if the library was loaded succesfully?

A general answer/approach would be perfect, but if that's not feasible, I'd be grateful for an answer on these two libraries.

Just test for the feature that the library is supposed to provide. There are many ways — Bergi, Jan 26 '21 at 23:50
How would I test a feature like `balanceText`? I can't think of any object's property changing, it's purely visual? — user1111929, Jan 27 '21 at 00:07
That library supplies a global `balanceText` function (according to the docs), whose existence you can test for. — Bergi, Jan 27 '21 at 00:09
I see. So simply `if(typeof balanceText == 'undefined')` should be sufficient? Makes sense, thanks! — user1111929, Jan 27 '21 at 00:12

score 5 · Accepted Answer · answered Jan 27 '21 at 01:32

If you're using loading the script yourself, you can use the onerror event on the script element to see if the script loaded instead of checking for side effects. Example:

<script>
function cdnLoaded() {
  console.log('loaded');
}

function cdnError() {
  console.log('not loaded');
  // do error handling here
}
</script>

<script onload="cdnLoaded()" onerror="cdnError()" async src="https://unpkg.com/react@17.0.1/umd/react.production.min.js"></script>
<script onload="cdnLoaded()" onerror="cdnError()" async src="https://unpkg.com/nothing-here.js"></script>

How does one test if some javascript library was loaded succesfully from CDN?

1 Answers1