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 <script> tag toe in de <head> 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:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.onload = function() {
//voorbeeld: basic:
load.js('js/een_bestand.js');
//voorbeeld: doe iets wanneer het bestand geladen is:
load.js('js/een_bestand.js',function(){
//doe iets, bijv. een functie starten uit "een_bestand.js".
});
//voorbeeld: laad altijd een nieuwe versie van het bestand:
load.js('js/een_bestand.js',null,Math.random());
//voorbeeld: laad altijd een nieuwe versie en doe iets wanneer het bestand geladen is:
load.js('js/een_bestand.js',function(){
//doe iets, bijv. een functie starten uit "een_bestand.js".
},Math.random());
//laadt het mootools framework:
load.js('js/mootools.js',function() {
//doe iets met het framework :D
});
//laadt eerst mootools en DAARNA pas een_bestand_dat_mootools_nodig_heeft.js.
load.js('js/mootools.js',function() {
load.js('js/een_bestand_dat_mootools_nodig_heeft.js');
});
}
/*syntax-highlighter >>> */ ?>
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
Voorbeeld: http://www.levensweg.net/liveOS3.4/
Gesponsorde koppelingen
PHP script bestanden
Er zijn 6 reacties op 'Ondemand javascript loader'
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu