Performance-enhancing CSS image array and reconnect function

[pap3rw8]

An image array is a CSS trick in which multiple images are in the same file and are split by the client. This noticeably improves load time by consolidating all the requests for separate icons. Within my own network, WebKit's page load benchmark tool shows a reduction in load time of 25% (was ~1100ms, now 830ms). I run Clutch 0.4 on a non-Clutch-specific lighttpd on os x.
transmission.js must be modified to prevent unnecessary preloading.
Here's the CSS file, the two PNG files (with PSD sources), and the patched transmission.js :
http://cuberoot.us/docs/clutch_imgarray.tar.bz2


Also, feature request: could Clutch have a reconnect function so that the page doesn't have to be reloaded after waking the computer from sleep?


Edit: I've filled my own request. Place this modified transmission.remote.js in the javascript directory of Clutch.
http://cuberoot.us/docs/transmission.remote.js

[xShad0w]

server for the download is down, can u post a mirror?

[davos]

nice idea pap3rw8, thanks! it's committed in revision 365. Since you seem fairly handy with photoshop, is there any chance you (or anyone else!) could make that same icons.png with the leopard buttons? I know there's an old leopard theme floating around this forum somewhere that we didn't have time to integrate before - maybe someone could port the gfx to this image-bundle idea, or make a new set of leopard buttons if that's not possible. once we've got the new buttons we can get started on the leopard interface.

thanks again!

[xShad0w]

I talked to gimp about this earlier and explained to him that having one huge image is not the best way to get this done, the images should be compiled into proper sections though, the menubar icons get one image, the buttons for pause and such, because if its all one big image and the css is going around putting that image everywhere and then only showing a little bit, it has to manipulate a big image everytime it want's to display any image, this method is sub optimal, i did commit a patch for 362 that took care of a problem caused by having the pause and refresh (small) buttons be seperate files, it took care of the problem nicely and improved performance by having them together in one file, so the images should be combined but based on how there going to be used, not in one big bunch, sorry for the commanding

[hawkman]

OTOH, it dramatically decreases page load time, and let's be honest - it'd have to be a really old computer to not be able to handle a few instances of a mid-sized image. I've used a similar technique on my iPhone, and it really does slash load times, particularly in low bandwidth situations like Edge. I'm for it (in fact I'd based my work on this approach). [edit] Which come to think about it means this is going to be a pain to integrate with my interface work, because I have extensively messed with the toolbar. Dang. [/edit]

Can I vote against the leopard buttons though? They're hard enough to see in Transmission, let alone in something like Safari with a row of very similar buttons not far above :/

[xShad0w]

hawkman i'm with you on the leopard buttons, i like the color one's better and i don't really know why they got taken out of transmission in the first place but not my place to complain, u do make a good point hawkman on the big image, i actually haven't seen how big the image is, i thought it would be substantially big because every time i checked the link was down but it just worked and i checked, that's not bad, in my mind i imagined a huge image considering there is a lot of images with clutch, one thing i can say is to reduce the space in between the icons, it's not neccesary, if u set the size of the image correctly with css it shouldn't show anything else so no reason to have space in between them

[pap3rw8]

is there any chance you (or anyone else!) could make that same icons.png with the leopard buttons? I know there's an old leopard theme floating around this forum somewhere that we didn't have time to integrate before - maybe someone could port the gfx to this image-bundle idea, or make a new set of leopard buttons if that's not possible. once we've got the new buttons we can get started on the leopard interface.

I'll probably have some time this weekend to put the new set together. If I can't find the leopard theme, I suppose I can just work from screenshots.

[hawkman]

Hey. If you do make Leopard buttons, I suggest you work from current svn - the array no longer needs large amounts of whitespace around each image 'cause the button images are in a separate div now.

[constancy]

What books would you recommend for beggining to learn css and javascript? I have heard good things and bad about the bible and I tried the Javascript and Dhtml cookbook but it was difficult to read does anyone have suggestions?
______________________
external keyword tool ~ keyworddiscovery.com ~ keycompete.com ~ compete.com ~ webmasterworld.com