If I put my inline script after the DOM elements it interacts with, should I still use YUI 3's domready event?
I haven't noticed any problems, and it seems like I can count on the browser loading the page sequentially. (I already useYUI().use('node', ...to make sure the YUI functions I need have been loaded since the YUI script is a separate file.)Is there a way to speed up the loading of widgets like YUI 2's calendar?
I load the appropriate script in<head>element of my page. I useYUI().use('yui2-calendar', ...to make sure the Calendar widget is available. Unfortunately, this causes a short but noticeable delay when I load my page with the calendar. If I omit theYUI().use('yui2-calendar', ...code then it shows up without a noticeable delay - but I guess this could cause the Calendar to not show up at all if the YUI script doesn't load in time?With regards to #2, is it possible to reduce the visual artifact of the calendar not being present and then showing up?
I've made it slightly better by specifying a height and width for the parent div so that at least the space is already allocated => minimal shifting around when it does load.
views:
102answers:
2If it's after the said nodes in question, then you don't need DOMContentLoaded (or domready).
You don't need domready if the code that accesses DOM elements comes after those elements in the markup. This applies to DOM scripting in general, not just YUI.
yui2-calendar is not identical to yahooapis.com/2.8.0r4/build/calendar/calendar-min.js. The former includes some wrapping code to sandbox the Calendar API and its dependencies in the YUI 3 instance environment. If you're including the YUI 2 scripts in the <head> (which you arguably should place at the end of the <body>), you don't need to use yui2-calendar. Doing so just loads the Calendar code twice. Otherwise, to leverage YUI 3's dynamic async loading, you can remove the <script>s from the <head> and just use('yui2-calendar'). You can get the appearance of speeding up the time to render by including the yui2-* combo <script> in your markup after the yui-min.js seed file. Note the Loader will always fetch the css file, so you don't need to include that in the markup.
<script src="http://yui.yahooapis.com/combo?3.1.0/build/yui/yui.js"></script>
<script src="http://yui.yahooapis.com/combo?2in3.1/2.8.0/build/yui2-yahoo/yui2-yahoo.js&2in3.1/2.8.0/build/yui2-dom/yui2-dom.js&2in3.1/2.8.0/build/yui2-event/yui2-event.js&2in3.1/2.8.0/build/yui2-calendar/yui2-calendar.js"></script>
You can include the css and markup of a rendered Calendar on page load, then render into the markup container. I don't think YUI 2 calendar has the notion of progressive enhancement of existing markup baked in, but I could be wrong. It should clobber the static table markup with its generated markup and vivify the UI.