dominoExperts.com - Powered by Domino 8.5.2 Domino Accelerator Pack
- Accelerate your web applications
Lotus Triple Search DominoExperts + Blogs + R8 forum
dominoExperts.com -> Script vault -> Ajax

 Lazy loading Dojo


Tomas NielsenPost date: 2009-07-06 20:43

Loading and instantiating Dojo can make a web page appear slow. So in an experiment I wanted to load dojo after the page had loaded and filled the screen with information.
This works very well and I thought I should write a small example. I am utilizing this on the front page of dominoexperts.com's site for the live performance graph.
This is how it works:

After onload, run all your onload scripts and when done run a function to load dojo like this:

function loadGraph() {
 djConfig = {afterOnLoad : true,
  addOnLoad:function() {initLoader();},
  useXDomain: true
 };
 var e = document.createElement("script");
 e.type = "text/javascript";
 e.src="/dojo-release-1.3.1/dojo/dojo.xd.js|/dap/dap.nsf/dap2.js|/dojo-release-1.3.1/dojox/gfx/shape.xd.js|/dojo-release-1.3.1/dojox/gfx/path.xd.js?dapmerge";
 document.getElementsByTagName("head")[0].appendChild(e);
}

As you might have guessed dojo.js is loaded trough a script-insertion. The 4 last lines of the script inserts a <script> node in the <head> part of the DOM after the page is 
done and displayed. This is the nice part because we use the half a second of attention span, when the user is still looking at the screen before deciding what to do on the page, to load dojo.

I have streamlined the dojo loading further by combining all the JavaScript’s into one using the ?dapmerge DAP feature. This can of course be done manually if you prefer.

I will return with some exiting info on how to do dojo builds trough DAP shortly. 


Please disregard the useXDomain:true line. It is only because I had an xdomain build I use for other things. This works just as well when you load from the same domain.

Dojo has support for late loading trough the "afterOnLoad : true" property of djConfig. To be able to run your own scripts when dojo has loaded just add an anonymous 
function to the addOnLoad property of djConfig. I added the initLoader() that will do all the dojo.requires and start painting the graphs - see code below.

function initLoader() {
 dojo.require("dojox.charting.Theme");
 dojo.require("dojox.charting.scaler.linear");
 dojo.require("dojox.charting.Chart2D");
 dojo.require("dojox.lang.functional");
 dojo.require("dojox.charting.widget.Legend");
 initMovingGraphsPerSeconds();
}

Since all the require files are already streamlined into the original dojo load the only files dojo need to load is the browser dependent files (which I did not want to include in the build). This is of course not needed. You can put in your require and have dojo load the files you need one by one. It will just take a little longer.




RSS feed
Subscribe to Forum

Share this page

Top posters
Tomas Nielsen212
Joacim Boive27
Fredrik Stöckel27
Danne14
Niklas Waller13
Kenneth Haggman11
Bryan Kuhn10
Daniel Lehtihet9
Jonas Israelsson8
dm997