Stop multiple scripts/plugins from being called more than once. VF Component

Question

This may not be strictly a VF question, but I thought I would ask all the same.

I have a VF component which contains jQuery and some plugins.

 <c:myComponent jQuery="true"
     jQueryUI_custom="true"
     cookiesPlugin="true"
     dropdownPlugin="true"/>

This is included on about 30 pages, but some of the pages include other pages also, these pages contain includes of their own. So eventually the same plugins are called several times.

Is there any way I could look for plugins or scripts and stop them from loading twice? Preferably using javascript.

Cheers

Answer 1

Most libraries will check to see if they are already installed and not re-initialize themselves, or can be configured to ignore multiple copies of itself.

Alternatively, according to this asp.net - Prevent jQuery multiple reference - Stack Overflow question, you could also perform the same general check and dynamically include the library if not already loaded:

window.onload = function () {
  if (window.jQuery === undefined) {
    var script = document.createElement('script');
    script.src = 'path/to/jquery.min.js';
    document.getElementsByTagName('head')[0].appendChild(script); // load jQuery
  }
};

This is probably the easiest way to accomplish this goal.

You could also use the lightweight require.js module that is specifically designed to avoid installing itself or any dependencies more than once per page load, no matter now many times they are included.