Scripts

on-demand javascript loader

Javascript. Een leuke taal waarmee je vele leuke effecten en handigheidjes kan toevoegen op je website. Wanneer het aantal leuke dingetjes echter toeneemt krijg je het hyves-effect: lange laadtijden bij het binnenhalen van enorme de lappen javascript. Het is namelijk zo dat normaal gesproken de javascript bestanden worden binnen gehaald, worden ingelezen EN worden uitgevoerd VOORDAT er ook maar 1 tagje HTML op het scherm verschijnt. Als je dan een hele lading javascript hebt op je website mogen je bezoekers lekker lang wachten bij iedere pageview voor het laden van een zooi javascript. Is dit op te lossen? Ja, met een javascript on-demand loader: een script voor het dynamisch invoegen van Javascript bestanden. Er zijn meerdere manieren om javascript bestanden dynamisch in te voegen en uit te voeren, maar de "voeg een tag toe in de tag" methode is nog altijd de beste omdat de browser dan gebruik maakt van de browsercache, in tegenstelling tot de methode om scripts in te laden via XmlHttpRequest. Na enkele dagen kloten en googlen heb ik de volgende javascript on-demand loader gemaakt. Met de onderstaande functie kan je makkelijk een zooi javascript-scripts inladen nadat je pagina zichtbaar is voor de gebruiker en het werkt ook nog eens supersimpel. Voorbeeld van gebruik: Veel plezier met javascript! psst: mootools of een ander frameowork is NIET VEREIST voor de werking van de loader. Het script is met succes getest in: IE6 /winXP IE8 in compatibiliteits modus (identiek aan IE7) /winVista IE8 /winVista FF3 /winVista Safari /winVista Chrome /winVista Chrome /winXP Opera /winVista

ondemand-javascript-loader
[code]<? // <<< voor syntax highlighting. Dit is een javascript functie.

var load = {
	/*
	load.js( string/array FILE [, function ONCOMPLETE] [, string/number CACHEID] )
		FILE: bestandsnaam/bestandsnamen van het script.
		ONCOMPLETE: functie die uitgevoert moet worden wanneer het bestand/de bestanden klaar zijn met laden.
		CACHEID: geef een id op. Verander het id om de browser een nieuwe versie van het bestand te laten laden. Je kan als Id een MD5 hash van het bestand meegeven.
			In debugfase kan je ook gewoon het resultaat van Math.random(); opgeven om iedere keer een vers bestand binnen te halen.
			Cache-ID kan bestaan uit alles wat om te zetten is tot een tekenreeks, zoals een getal of tekenreeks. Array's worden NIET automatisch omgezet.
			Je kan een_array.join("-"); gebruiken om een array om te zetten tot een tekenreeks.
	*/
	js:function(files,oncomplete,cacheid) {
		if(typeof files=='string') {
			files = [files];
		} else if(typeof(files)!='object'
		|| !(files instanceof Array)) {
			throw '1st argument should be an instance of Array or String.';
			return false;
		} else if(files.length == 0) {
			throw '1st argument is an empty Array. No files to load.';
			return false;			
		}
		if(cacheid !== undefined
		&& cacheid !== null
		&& cacheid !== false
		&& cacheid !== 0) {
			var cacheid = '?'+cacheid.toString();
		} else {
			var cacheid = '';
		}
		var c = 0;
		var check = function(){
			c++;
			if(c==files.length){
				oncomplete();
			}
		};
		for(var x=0;x<files.length;x++) {
			var file = files[x].toString() + cacheid;
			var elem = document.createElement('script');
			elem.setAttribute('type','text/javascript');
			elem.setAttribute('src',file);
			if(typeof oncomplete=='function') {
				if(elem.onreadystatechange===null
				&& elem.onload===undefined) {
					elem.onreadystatechange=function() {
						if(this.readyState=='loaded'
						|| this.readyState=='complete') {
							check();
						}
					}
				} else {
					elem.onload=check;
				}
			}
			document.getElementsByTagName('head')[0].appendChild(elem);
			var tempfunc=(typeof window.onunload=='function'?window.onunload:function(){});
			window.onunload=function() {
				tempfunc();
				document.getElementsByTagName('head')[0].removeChild(elem);
			}
		}
	}
}

/* >>> voor syntax highlighting.*/?>[/code]

Reacties

0
Nog geen reacties.