Using yepnope if already have inline jquery code on the page that can't remove

391 Views Asked by At

So advanced user's in a CMS (designers/web developers) may have access to add inline JavaScript/jQuery code in their content to do certain things like hide something on a specific page in the CMS via $(function(){ $('#banner').hide() }); and other more advanced things as well like add a jQuery UI datepicker on an input they added in the content.

My question is if jQuery and its dependent plugins are loaded asynchronously via YepNope (or RequireJS I assume too)... then when landing on that page, it will error since the jQuery library isn't available (till a few microseconds later when it's loaded).

What is the most optimal way to introduce a class loader like YepNope in a existing website like this to allow this inline code to stay the same?

My best guess is if want a CDN/fallback then load it synchronously like HTMLBoilerplate (or if don't need CDN-fallback just load normally via script tag):

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery/jquery-ui/js/jquery-1.7.1.min.js"><\/script>')</script>
<!-- maybe load Jquery UI and Jquery plugins that i know users will use -->

and then just use the yepnope loader only for other things that don't need to be used on the page?

Or can you do some tricks to delay execution of inline scripts until yepnope is done loading?

1

There are 1 best solutions below

0
On

Actually googling a bit better, I found my answer i believe in: https://stackoverflow.com/a/9582428/201156

Also the idea of lazy loading inline scripts is mentioned here which is interesting: https://stackoverflow.com/a/10197342/201156