Eric, I've got something very similar to this in my widget framework. JS,
CSS, and image resources are lazy loaded as needed during the course of an
application's life cycle, and disposed appropriately. The resources are
keyed, so if another widget or process requests the same resource (by id),
it's not loaded again if it has already been loaded by something else.
You should contact me off list, as I'd be interested in sharing ideas.
On 3/29/07, Eric Harrison <[EMAIL PROTECTED]> wrote:
>
>
> Great. I definitely want to hear how everything works out for you,
> even if you just shoot me an email off-list. Dynamic resource loading
> is definitely my forte and if you're interested, once you get the
> basics working I'd be more than happy to talk to you about some of the
> even more complex techniques like just-in-time resource allocation.
>
> From everything I've read on the internet regarding JavaScript
> development, I have not seen anyone using a technique as complicated
> as what I have in place. Probably just due to the fact that getting it
> working in every browser was such an impossible pain in the butt. That
> and the fact that JavaScript currently doesn't let you pass references
> to the String and Number data types (which caused me MAJOR headaches
> when trying to get a just-in-time loading mechanism working...
> *sigh*).
>
> Anyway, glad I could help.
>
> -E
>
> On 3/29/07, Justin <[EMAIL PROTECTED]> wrote:
> >
> > Thanks Eric, I think this is exactly what I needed. I'm going to check
> > those resources out now to have a look further but I'll let you know
> > if I was successful or not.
> >
> > Regards
> > Justin
> >
> > On Mar 29, 11:56 am, "Eric Harrison" <[EMAIL PROTECTED]> wrote:
> > > Well, there is currently nothing built in to Prototype.js that will
> > > allow you to do this, but I've solved a similar problem at work by
> > > building an additional library just to handle resource management like
> > > this.
> > >
> > > My version is extremely complex because I've successfully created a
> > > mechanism for just-in-time resource loading (my library will import a
> > > javascript file the first time a function defined in that file will be
> > > used) and also created several mechanisms to allow for resource
> > > destruction and dependancy management. Basically my library works like
> > > this:
> > >
> > > top level object:
> > >
> > > var CompanyName = {
> > > libs: {}
> > >
> > > };
> > >
> > > CompanyName.require = function(script,callback) {
> > > if ( ! CompanyName.libs[ script ] ) {
> > > var lib = document.createElement('script');
> > > var elemId = 'LIB_' + (new Date()).getTime();
> > > lib.setAttribute('id',elemId);
> > > lib.setAttribute('src',script);
> > > lib.setAttribute('type','text/javascript');
> > >
> > > /* Mozilla Load Event Listener */
> > > Event.observe(lib,'load',function() {
> > > ( callback || Prototype.emptyFunction )();
> > > });
> > >
> > > /* IE Load Event Listener */
> > > if ( lib.readyState && callback ) {
> > > lib.onreadystatechange = function() {
> > > if ( this.readyState == 'complete' || this.readyState ==
> > > 'loaded' ) {
> > > ( callback || Prototype.emptyFunction )();
> > > }
> > > };
> > > }
> > >
> > > document.getElementsByTagName('head')[0].appendChild(lib);
> > > CompanyName.libs[ script ] = $(elemId);
> > > } else {
> > > ( callback || Prototype.emptyFunction )();
> > > }
> > >
> > > return true;
> > >
> > > };
> > >
> > > /*
> > > on window load, spin through the pre-defined scripts and add them
> > > to our list of "loaded" libraries
> > > */
> > > Event.observe(window,'load',function() {
> > > $$('script').each(function(elem) {
> > > var elemId = $(elem).getAttribute('id');
> > > var src = $(elem).getAttribute('src');
> > > if ( ! elemId ) {
> > > elemId = 'LIB_' + (new Date()).getTime();
> > > $(elem).setAttribute('id',elemId);
> > > }
> > > if ( src ) {
> > > CompanyName.libs[ src ] = elemId;
> > > }
> > > });
> > >
> > > });
> > >
> > > And there you have it, a simple resource loading mechanism. Our
> > > version has a lot more complexity and we have the capability in our
> > > functions to dynamically load CSS files and favicon's using the same
> > > function, but I took all of that out just to focus on exactly what
> > > you'll need to load scripts dynamically.
> > >
> > > The other (perhaps simpler) option that you can try is to load all of
> > > the scripts outside of the HEAD tag. Put your script definitions near
> > > the bottom of your BODY element which will allow the browser to mostly
> > > finish rendering the content before going out to try to fetch any
> > > JavaScript files. There have been a lot of articles written covering
> > > this concept.
> > >
> > >
> http://developer.mozilla.org/en/docs/Tips_for_Authoring_Fast-loading_...http://betterexplained.com/articles/speed-up-your-javascript-load-time/http://www.thinkvitamin.com/features/webapps/serving-javascript-fasthttp://roscripts.com/Web_page_optimizer-109.htmlhttp://www.ajaxperformance.com/?p=33
> > >
> > > Hope this helps. Good luck!
> > >
> > > -E
> > >
> > > On 3/29/07, Justin <[EMAIL PROTECTED]> wrote:
> > >
> > >
> > >
> > >
> > >
> > > > I have a major problem with load time of my sites index.php page.
> > > > Because there's so much Ajax/JavaScript placed in the <head> tags
> the
> > > > page takes about 10 seconds to load the JS and then a further 5/7
> > > > seconds to load the content giving me a total load time of about
> 17.22
> > > > seconds and 170kb.
> > >
> > > > So the theory here is that I load all the JS into the cache first
> but
> > > > I'm suffering with a long page load time which is killing me. It
> > > > wouldn't be so bad if a user saw some action but right now they have
> > > > to wait 10 seconds minimum before they evern begin to see the
> content
> > > > load which is frustrating.
> > >
> > > > Is there some way in which I can rather load a specific JS code on
> > > > clicking a link that requires that JS code instead of pre-loading it
> > > > in the <head> tag? I'm guessing it will have something to do with
> the
> > > > onclick event but I really don't know and any help is really really
> > > > appreciated.
> > >
> > > --
> > > Eric Ryan Harrison
> >
> >
> > >
> >
>
>
> --
> Eric Ryan Harrison
>
> >
>
--
Ryan Gahl
Application Development Consultant
Athena Group, Inc.
Inquire: 1-920-955-1457
Blog: http://www.someElement.com
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Ruby
on Rails: Spinoffs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/rubyonrails-spinoffs?hl=en
-~----------~----~----~----~------~----~------~--~---
