How to lazy load scripts in YUI that accompany ajax html fragments
- by Chris Beck
I have a web app with Tabs for Messages and Contacts (think gmail). Each Tab has a Y.on('click') event listener that retrieves an HTML fragment via Y.io() and renders the fragment via node.setContent().
However, the Contact Tab also requires contact.js to enable an Edit button in the fragment.
How do I defer the cost of loading contact.js until the user clicks on the Contacts tab?
How should contact.js add it's listener to the Edit button?
The Complete function of my Tab's on('click') event could serialize Get.script('contact.js') after Y.io('fragment'). However, for better performance, I would prefer to download the script in parallel to downloading the HTML fragment. In that case, I would need to defer adding an event listener to the Edit button until the Edit button is available.
This seems like a common RIA design pattern. What is the best way to implement this with YUI? How should I get the script? How should I defer sections of the script until elements in the fragment are available in the DOM?
