Reputation: 3442
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?
Upvotes: 0
Views: 380
Reputation: 3442
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
Upvotes: 1