An interesting technique... and no idea why it is used
Sun 25 Mar 2007, 09:11 PMTweet
by Ben Langhinrichs
eCell.innerHTML = '<div class="TB_Button_Image"><img src="default/fck_strip.gif" style="top:-' + ( i * 16 ) + 'px;"><\/div>' ;
referencing the CSS which looks like:
Copyright © 2007 Genii Software Ltd.
What has been said:
589.1. Johan Känngård (2007-03-25 23:20)
The reason this techique is used, is because it's much faster to download a single image than multiple ones. Every request takes time to handle for the network, the server and the client. A single image is also better cached in proxies and in the client.
589.2. Steve Castledine (26/03/2007 03:23)
I think it also looks better - I always find it looks poor to a user when single images are flashing up one by one when something is not running quickly. Anything not to confuse them!
589.3. Peter Herrmann (03/26/2007 05:03 AM)
The 'technical' term is CSS Sprites and the reason is as Johan stated: to reuce the number of calls to images (because a browser can only make about 4 requests at a time). Yahoo has an excellent piece on the perf considerations here : http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ .
589.4. Charles Robinson (03/26/2007 06:52 AM)
Wow, the things you learn by asking. :-) To quote G.I Joe from my grammar school days, "Knowing is half the battle!"
589.5. Ben Langhinrichs (03/26/2007 08:50 AM)
Thanks, all! I do like the way the whole toolbar shows up instantly, but I had no idea about the four images part. Interesting stuff.
589.6. Robin Wills (26/03/2007 13:11)
Here's a good explanation Michel Van Der Meiren's Domino 2.0 blog which is worth a read. Michel's written his blog from scratch in Domino.
589.7. Chris Reckling (03/30/2007 01:41 PM)
Notes client does a similar technique for its toolbars except the icons are in a long horizontal image (and there is also a mask image to handle things like disabled states).