Mark,
Sure. 
First, I use jQuery’s built-in ajax. As jQuery are needed for the tooltips, why not use it. I has many error-handlers if they are wanted to be used. As example, IsActive-function could be ajax-function name:
error:function(jqXHR, exception) {
setLed(false, exception);
httpError+=1;
if (jqXHR.status === 0) {
setStatus('Not connect. Verify Network.');
} else if (jqXHR.status == 404) {
setStatus('Data not found. [404]');
} else if (jqXHR.status == 500) {
setStatus('Internal Server Error [500].');
} else if (exception === 'timeout') {
setStatus('Time out. Retrying...');
if(httpError<3){setTimeout('IsActive()', 2000);}
if(httpError>=3){setStatus('Gived up.');}
} else if (exception === 'abort') {
setStatus('Data request aborted.Retrying...');
if(httpError<3){setTimeout('IsActive()', 2000);}
if(httpError>=3){setStatus('Gived up.');}
} else {
setStatus('Uncaught Error.'+jqXHR.responseText);
}
}
From my measurements are windrose pretty heavy and slows down the page getting ready more than other gauges. If want faster pageload it should it not be used or it should be drawn later in some way and at least not in same function as the rest gauges are drawn. Windrose are also pretty useless to have ajaxed as its data will not change much anyway in the time average user looks at it, just drawing it once are enough. Expecially if slower CPU/GPU drawing the gauges stall the browser at least for some time, thats the silly fact. That stalling can disturb visitors and also getting them elsewhere for sure. On my testpage are windrose not used.
Learned also during fiddling with theese that javascript are one-threaded, this means it can do only one thing at time (sigh).
One important thing are also in wich order js-files are loaded and then runned.
- One CPU-huge thing was the “canvas-detection” in orginal script. Replacing it with modernizr.js what detects many other things too like box-shadows dropped CPU-usage drastically. Instead of trying creating an unvisible canvas only this are needed:
if(!Modernizr.canvas){
// what do if no canvas
}
- I have the gauge-ajax integrated to topbanner ajax (called scripts.js) and biggest improvent was when i lifted out the gauge-ajax from gauges.js and integrated it to topbanner-ajax. This script are loaded and then ajax fired before any steelseries-scripts are loaded. Then we have clientrawdata available soon as steelseries are ready and not need to wait for the ajax. In orginal are ajax fired first when all steelseries-scripts are loaded. Thats an unneeded slowdown as steelseries-scripts takes some time to be loaded, are they shipped from browser-cache or not.
Instead, in topbanner-ajax are an if-function what runs the update of gauges if steelseries are defined (about line 88 in scripts.js):
if(typeof steelgauges == 'function') {
steelgauges(ns);
}
steelgauges() are updatefunction for gauges, ns are clientrawdata-array.
- Have also integrated drawXxxx() with doXxxx() a bit. Gauges are both drawn and updated with same command doXXX(). It just check if gauge in question are defined, if not it calls drawXxxx(). And here is what seems to be the magic, i used setTimeout’s when call drawXxxx(), as example:
if(gauge_temp === undefined){
setTimeout(function(){
drawTemp();
$('#canvas_temp').qtip({content: g_temp.tip});
setTimeout(function(){
doTemp();
;
},2);
},2);
}
Note, i use qTip2 as tooltip-plugin here.
Working files:
http://scripts.nordicweather.net/jquery/scripts.js
http://scripts.nordicweather.net/jquery/gauges.js
For usage on page where gauges are not at top of the content and therefore not visible for visitor at initial load, when ex. having a forecast at top, i suggest usage of a lazyloader (ex. Modernizr.js) to load steelseries.js async, like this:
Modernizr.load({
load: ["http://scripts.nordicweather.net/jquery/language.js",
"http://scripts.nordicweather.net/jquery/steelseries.min3.js",
"http://scripts.nordicweather.net/jquery/gauges.js"],
complete: function(){steelgauges(ns);}
});
In use as test here: http://www.nordicweather.net/index.php with other bowser than IE, you see that topbanner-ajax shows up almost immedately here and steelseries do not stall the load of the page.
EDIT: Changed the last url to reflect the changes on the site, steelgauges are now on frontpage for other browsers than IE.
Henkka
