klik op het onderstaande plaatje
Grote javascript libraries kunnen onnnodig het laden van een pagina sterk vertragen. Als daarbij het ook nog zo is dat een library alléén maar nodig is om een aktie uit te voeren nádat de pagina geladen is (b.v. een spelletje o.i.d.) kan je beter die (javascript) library inladen (alleen) als het echt noodzakelijk is. Op deze pagina is de volgende constructie toegepast:
Er staat een plaatje op de pagina met een onclick die de volgende code omvat:
<img onclick="javascript:deferred('deferred-load.js','een-andere-library.js');" src="deferred-load.jpg" width="180" height="226" alt="deferred load" />
Ik neem aan dat het duidelijk is dat de het plaatje ook een gewone link kan zijn, en dat de "onclick" ook een "onmouseover", of wat dan ook kan zijn. Als er een klik op het plaatje wordt gegeven komt de (javascript)functie deferred() in actie, die achtereenvolgens de library deferred-load.js en een-andere-library.js inlaadt. De inhoud van de hier gebruikte "library" is natuurlijk summier... In de deferred-load.js staat alleen de regel:
document.body.style.backgroundColor = "#ffaaff";
Om de deze procedure ook op jouw pagina('s) te laten werken moet je even het onderstaande javascript(je) zo laag als mogelijk in de body-sectie van jouw pagina plaatsen. Het javascript is overigens foutloos volgens de strenge JSLint-norm.
<script>
/*global defer_file:true */
var objecten_geladen = '',
i;
function deferred() {
if (!document.getElementById) {
return;
}
for (i = 0; i < arguments.length; i++) {
var deferred_file = arguments[i];
if (objecten_geladen.indexOf(deferred_file) == -1) {
if (deferred_file.indexOf(".js") != -1) {
defer_file = document.createElement('script');
defer_file.setAttribute("type", "text/javascript");
defer_file.setAttribute("src", deferred_file);
}
}
if (defer_file !== "") {
document.getElementsByTagName("head").item(0).appendChild(defer_file);
objecten_geladen += deferred_file + " ";
}
}
}
</script>