✔ PreLoad Grundlagen?

[tharo]

PreLoad Grundlagen - Inlcudieren / Laden von lokalen Ressourcen / Scripten

Hallo alle zusammen.

Ich hab mich gefragt ob jemand die tieferen Grundlagen des PreLoadings unter JavaScript kennt oder eventuell einen guten Link dazu beisteuern könnte. Google meint es mal wieder 'zu' gut.

Es geht um folgendes: In einem größerem Projekt werden praktisch andauernd Bilder nach geladen und ggf. auch wieder entladen. In den klassischen Libs die man so verwenden kann wird dabei stets ein Resultat in Form einer callback Funktion geboten. Zugegeben, eigentlich eine nette Sache .. Aber es hat mich neugierig auf die Grundlagen gemacht.

So habe ich zum Beispiel mit dem Gedanken gespielt mir eine eigene, zuverlässige "include" - Funktion zu schreiben. Sie soll in der Entwicklungszeit quasi als Puffer die Arbeit erledigen, die später der closure-compiler übernimmt (-> Alles in ein Script zusammen compilieren).

function include(url) {
	var scrpt = new Element('script', {type:'text/javascript', src:url});
	$('loader').adopt(scrpt);
}

Ist die SEHR billige Fassung. Das geht natürlich überhaupt nicht. Wenn Script a und b eine Abhängigkeit haben, b aber vom Browser zuerst geladen wird, dann haben wir sofort ein gewaltiges Problem.

function include($url) {
	var req = new Request({
		url:$url, 
		onSuccess: function(txt) {
			eval(txt);
		},
		onFailure: function(){ },
    });
	req.send();
}

Kam als zweites. Mal davon abgesehen, dass lokale Files laden immer sehr nervig ist, stoße ich hier aber an das eigentliche Problem:
Wenn ich ganz viele Sachen in der richtigen Reihenfolge laden will. Wie stelle ich das am besten an?

Bleibt zu hoffen das jemand von euch sich dem Problem bereits gestellt hat und ggf. einen kleinen Tipp geben mag ^^

 

[tharo]

Ach. Ich hab mich nun also mal selber durchgewühlt.

Fündig wurde ich beim UnixPapa. Papa hat sich offenbar schon einmal intensiv mit dem Thema befasst und seine Ergebnisse auf http://unixpapa.com/js/dyna.html veröffentlicht.

Im Grunde genau das was man brauch wenn man die AJAX Funktionen umgehen will (zB. bei lokalen Files): Das Objekt wird geladen und es gibt entsprechende Events mit denen man arbeiten kann.

Ich habe sein Beispiel mal ein wenig erweitert ..

function requires(urls, fn) {
	if(!(urls instanceof Array)) urls = Array(urls);
	
	var head = document.getElementsByTagName('head')[0];
	var started=0, finished=0;
	
	// callback
	var progress = function() {
		finished++;
		if(fn.onProgress!=null) fn.onProgress(finished, started);
		if(finished==started&&fn.onComplete!=null) fn.onComplete(finished);
	}
	
	for(var i=0; i<urls.length; i++)
	{
		var script = document.createElement('script');
		script.type = 'text/javascript';

		// callbacks
		script.onreadystatechange = function () {
			if(this.readyState == 'complete' ||
			   this.readyState == 'loaded') progress();
		}
		script.onload = progress;
		
		// load
		started++;
		script.src = urls[i];
		head.appendChild(script);
	}
}

Der Artikel enthält im übrigen einige interessante Erklärungen zu dem Thema. Was ich jedoch extrem bescheiden fand, war das der Autor am Ende all seine Arbeit über den Haufen schmeißt und die bis dahin wunderbar abstrakten Lösungsansätze einfach knickt in dem er sagt "haha, ich rufe einfach am ende jeder JS Datei eine Funktion auf die alles wichtige macht" ... Toll. Da hätte er sich die Arbeit ja auch irgendwie sparen können >.<

Ob und in welchen Browsern der Ansatz zZ funktioniert müsste man testen. Als Workaround für den closure compiler reicht es aber dicke aus wie ich finde.