on-demand javascript loader

Door Toby hinloopen, 13 jaar geleden, 4.202x bekeken

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:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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
<? // <<< voor syntax highlighting. De onderstaande voorbeelden zijn javascript functies.

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

  1. ondemand-javascript-loader

 

Er zijn 6 reacties op 'Ondemand javascript loader'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Loran DP
Loran DP
13 jaar geleden
 
0 +1 -0 -1
Toby, je hebt bij VD: localhost
Wel even aanpassen...
Toby hinloopen
toby hinloopen
13 jaar geleden
 
0 +1 -0 -1
@Digi-NL
lol, lekker slim :xD
ff aanpassen :P

edit:
done.
Lode
Lode
13 jaar geleden
 
0 +1 -0 -1
Misschien ook wel even nuttige te vermelden dat je met zo'n lazyloader domReady functionaliteit danwel overbodig maakt of zelfs om zeep helpt.
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
<?php
if(typeof callback == 'function'){
    callback();
}

?>


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.
Richard van Velzen
Richard van Velzen
13 jaar geleden
 
0 +1 -0 -1
Leuk, maar hiermee veroorzaak je memory leaks in IE6. Je moet de script tag na laden verwijderen uit de DOM, zo blijft het wel geladen maar wordt het ook goed ontladen als de pagina wordt verlaten.
Toby hinloopen
toby hinloopen
13 jaar geleden
 
0 +1 -0 -1
@Richard: owke. Gewoon onunload = "...." toevoegen is geen probleem. Maar IE6 heb ik sowieso schijt aan. IE7 houd ik als minimum. IE6 is echt amper mee te werken en niet veel mensen gebruiken nog IE6. Hooguit zo'n 20%. Dat zijn nog aardig wat mensen..., maar ze stappen maar over. Ik ben IE6 zat, die browser is bijna 6 jaar oud ofzo. Ze stappen maar over. Met IE6 heb ik een "het moet tenminste werken" beleid. Snelheid of geheugenlekken heb ik echt schijt aan tenzij het simpel op te lossen is.
@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
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Toby hinloopen
toby hinloopen
13 jaar geleden
 
0 +1 -0 -1
Code verbeterd: meer controles, support voor het laden van meerdere scripts TEGELIJK waarbij de oncomplete functie gestart wordt wanneer alle scripts klaar zijn.

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.

Inhoudsopgave

  1. ondemand-javascript-loader

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.