[whatwg] Link.onload

[Greg Houston]

On Sat, Mar 14, 2009 at 4:46 PM, Garrett Smith <dhtmlkitchen at gmail.com> wrote:
> I proposed a solution to a similar problem not too long ago.
>
> <script depends="[idref]" ...></script>

For me to implement my own "depends" lazy loader without any hacks the
only thing missing is that link onload callback.

Given the following example, with depends, if a, b, or c are links,
how would you set their "title", "rel", "href", "media" and other
attributes? If a, b, or c is a script, how would you set the "id" or
"type" of that script?

<script depends="a b c"></script>

>Example:-
><link onload="loadPlayer()" ...>

This is sort of what I am doing, but missing a couple steps:

This is basic usage:

[The following examples are using Mootools syntax]

MyApp.extend({

	Calendar: function(args){  // This entire function is replaced when
calendear.js is loaded.
		$require({
			dir: MyApp.pluginDirectory + 'Calendar/',
			cssFirst: true,
			css: [{url: 'css/calandar.css', media: 'all'}, {url:
'css/calandarPrint.css', media: 'print'}],
			images: ['images/bg.jpg', 'images/dayHover.png'],
			javascript: [{url: 'js/calandar.js', id: 'calendarScript'}],
			onProgress: function(counter, index, assetsToLoad){
				console.log(counter + ' of ' + assetsToLoad + '  required files loaded.');
			},
			onload: function(){
				console.log('All required files loaded.');
				new MyApp.Calendar(args);
			}.bind(this)
		});
	},
	
	Chat: function(){  // This entire function is replaced when chat.js is loaded.
		$require({
			// ...
			onload: function(){
				new MyApp.Chat();
			}
		});		
	}
		
});

There is a Core.js file that sets up the MyApp namespace. There are
plugins called MyApp.Calendar, MyApp.Chat, and so forth. If the user
does something that fires new MyApp.Calendar(args), all of the
Calendar assets are loaded, CSS first. The JavaScript in Calendar.js
overwrites the MyApp.Calendar lazy loading function with the "Class"
method for the Calendar. When the $require onload is fired it then
runs new MyApp.Calendar(args) again, this time creating a new Calendar
instance.

calendar.js:

MyApp.Calendar  = new Class({

	Implements: [Events, Options],

	options: {
		//
	},
	
	initialize: function(options){
		//
	}
	
)};

The MyApp.Calendar lazy loader is now completely gone and any future
calls to new MyApp.Calendar() immediately creates a new Calendar
instance.

So instead of  <link onload="loadPlayer()" ...>

it would be more like:

<link onload="checkLoadProgress()" ...>

loadPlayer() would not happen until all the required files are loaded.
checkLoadProgress() keeps a tally of the progress.

The CSS is created something like this:

css: function(directory, source, properties){
		
	properties = $merge({
		rel: 'stylesheet',
		media: 'screen',
		type: 'text/css'
	}, properties);
		
	return new Element('link', {
		rel: properties.rel,
		media: properties.media,
		type: properties.type,
		href: directory + source,
		onload: function(){ checkLoadProgress(); }
	}).inject(document.head);
		
}

I think a native lazy loader such as something along the lines of your
depends is a great idea. It would obviously have to be much simpler
than what I am doing, sort of in the same vein that you can use the
HTML 5 meter or create your own and have more control. I think your
idea would probably need more fleshing out though and would require a
great deal more from the user agents than what I am requesting, which
again is just an onload callback from the link element.

On a side note, I can actually attach a functioning onload event to a
link element in Internet Explorer. Firefox, Safari, and Chrome ignore
my attempt, and Opera will fire the onload event but not update the
style of the page. Opera gives the most curious result. I didn't
actually check the DOM to see if Opera appended the stylesheet or not.
It may be that it just short circuits and fires the onload event.

	return new Element('link', {
		rel: properties.rel,
		media: properties.media,
		type: properties.type,
		href: directory + source
	}).addEvent('load', function(){
		alert('Hello World');
	}).inject(document.head);

Cheers,

G.