Image pre loading with css and image sprites
We discussed image pre loading with javascript in my previous post.but it can’t be use full when javascript disabled browsers (off course use disables).So i got one idea how to implement without javascript for image preloading .
With Hidden Div Element
here the trick ,we know that browser loads all the assets (images,audio,embed elements ) as they appear in the HTML document.So we create a dive and hide and make it null style element .put the images which you want to load .
using css image sprites
for tri state button we need three image for each state (normal, hover, focus) by default we load normal image back ground. when we hove first time the second image loaded . so we use images sprites. as shown
Sample Sprite image for tri state buttons
Download Example Source code
image-preloading-with-css-sprites source code
Example for HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Image Preloading With CSS and Sprites</title> </head> <body> <!-- please visit for detailed tutorial http://www.maheshchari.com Here we use simple trick ,it work even without javascript first create a div element with given style attributes specified above. include the images which to be preloaded. remember put this div after the body tag, since this element is first rendered, all the images are loaded before they used --> image-preloading-with-css-sprites <div id="preloader_div"> <img src="amphi-thetre.jpg" /> <img src="amphi-thetre1.jpg" /> <img src="amphi-thetre2.jpg" /> <img src="amphi-thetre3.jpg" /><img src="ex-sprite.png" /></div> <div id="wrapper">begin your work here.</div> <h3>Preloading with images sprites example tri state button.</h3> <ul id="tributtons"> <li><a href="http://www.maheshchari.com/">button1</a> </li> <li><a href="http://www.maheshchari.com/">button2</a> </li> <li><a href="http://www.maheshchari.com/">button3</a> </li> </ul> </body> </html> |
Css sample
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <style type="text/css"> <!-- #preloader_div { display: none; height: 0px; width: 0px; margin: 0px; padding: 0px; position: absolute; } <!-- tri state buttons --> #tributtons { list-style-type: none; } #tributtons a,a:visited { display: block; background-image: url(ex-sprite.png); background-repeat: no-repeat; background-position: 0px 0px; width: 150px; height: 24px; text-decoration: none; text-align: center; text-transform: capitalize; } #tributtons a:hover { background-position: 0px -24px; } #tributtons a:focus { background-position: 0px -48px; } --> </style> |
Download Example Source code
image-preloading-with-css-sprites source code
Popularity: 13% [?]
Related Articles
6 users responded in this post
[...] javascript disabled browsers we can use css & sprite image preloading. ta [...]
Thanks for writing, I truly enjoyed your latest post. I think you should post more frequently, you evidently have talent for blogging!
Hi, Congratulations to the site owner for this marvelous work you’ve done. It has lots of useful and interesting data.
Bravo, what words…, an excellent idea
I want to find good pop music. Help me please.
[...] We know that all modern web browsers supports rounded corner elements but it doesn’t work in IE6.we know that all majority users are IE6 after the fire fox in organizations.here we use CSS sprites technique ,we already discussed about the advantage of the CSS sprites in my previous post. [...]
Leave A Reply