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 'On demand javascript loader'
-0 
omdat je nu met een onload van de scripttag aan de slag gaat.
Waardoor zo'n domReady event kan afvuren voor de script onload. Niet altijd, maar het kan.
verder zou ik de callback optioneel maken.
En waarom heb je niet gelijk even css en image loading meegenomen?
Kan ook wel nuttig zijn soms.
Dit werkt volgens mij niet in Safari 2. Niet dat volgens mij nog veel gebruikt wordt.
-0
-0
@Lode: ben ik nog mee bezig. Image loader werkt wéér anders... Image loader is te doen, maar een image loader met onload functie is me nog niet gelukt. Css komt er ook aan. Er komen nog veel meer functies, zoals een functie die de breedte van een tekst achterhaald. Echter, al deze functies worden dynamisch geladen met deze loader. Het wordt een uitbreidingspakket voor mootools, bedoeld voor web applicaties.
callback IS al optioneel, bij het invullen van NULL, FALSE of 0 wordt de callback genegeerd. Hij checkt echter niet of callback een functie is of niet, dat pas ik even aan.
IE6 script-tag onunload komt er ook aan.
EDIT:
code geupdate
-0
Geef een array aan bestandsnamen op om meerdere bestanden te laden. Wanneer 1 van de bestanden afhankelijk is van de ander kan je ze niet tegelijk laden. Je moet het 2e bestand dan laden op het moment dat het 1e bestand de functie "oncomplete" start.
Bestanden tegelijk laden is nuttig als je bestanden alleen maar functies bevatten en geen code bevat die direct wordt uitgevoerd waarbij code nodig is uit een ander script dat nog niet geladen is.
Zo kan je vele scripts tegelijk laden en pas met de oncomplete functie de scripts gebruiken.
Ook zijn wat resten van debug verwijderd.
Om te reageren heb je een account nodig en je moet ingelogd zijn.
PHP hulp
0 seconden vanaf nu