CSS top image preloader
Tip: Check Your works at least on three most popular browsers.
This tutorial will show You, how to use nice GIF animated preloaders for top images (or any other image). Now You can use larger images and show preloader first (Like in flash).
Why use such preloader? It's nice practice when You have large image as Your "top" background. Visitor will see "Loading..." animation insteed of empty space. That's more elegant.
First we have to make our site skeleton. This will be simple Top, and content part:
xHTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tutorial sample page</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="loader">
<div id="top"></div>
</div>
<div id="content"></div>
</div>
</body>
</html>
Save it as preloader.html
Now we have to think about page width. I'll choose 770px, and top image will be 770 x 250px. You can use any image, just make it "large" ... 150kb for example, and call it top.jpg. Last thing is loader.gif file. It can be any image. I use preloader which I made in my Animated preloader photoshop tutorial.
With this knowledge I can start the CSS part
div#container {width:770px; margin:0 auto;}
div#loader {background:url(loader.gif) center no-repeat;}
div#top {height:250px; background:url(top.jpg) no-repeat;}
div#content {height:550px; background-color:#3300FF;}
Save it as style.css
Time for explanations.
<div id="top"></div>
</div>
This is loader mechanism. Top image div is inside loader div. That will make loader.gif (only 2.5kb) load before top.jpg. After top image loads, loader.giv will be under it (but still there). Simple and effective.
* {margin:0; padding:0;}
This is global reset. Set margins and paddings to 0. Very useful.
div#container {width:770px; margin:0 auto;}
Main container. Holds whole content in one place. margin:0 auto is for center thing.
div#loader {background:url(loader.gif) center no-repeat;}
Loader div. Background image was set and centered.
div#top {height:250px; background:url(top.jpg) no-repeat;}
Top image div. Nothing special here.
div#content {height:550px; background-color:#3300FF;}
Just sample content div. Height and background-color was set to show result.
As You can see - It's not so hard at all.
Now You should have 4 files:
- preloader.html
- style.css
- top.jpg
- loader.gif
Now it's time to see final result.
If You have extreme fast internet connection - You won't see preloader. It's only 150kb Image ... for 1Mbit it's under 2sec.
Sample page with preloader.
Comments
Varelei
2007-09-25
Nice idea! I didn't think of doing this for my website, but I'll be using this to make it look better than having nothing there while it loads.
I'm going to see your other tutorials now, :).
The Wicked Flea
2007-09-30
Interesting concept, but a potentially bad implementation. The trouble is that if you use that method too frequently, then your browser is updating many invisible animated gifs. So it would bog a webpage down if you did it too frequently. Old pcs would make this like 32 gifs. ;) But you should be fine if you don't go overboard.
barat
2007-09-30
If You make only one div for preloader (using class) than this is only ONE image loaded via CSS for one div with specified class - one gif repeated 32 times :)
But IMO this method is for top image if You have to use something bigger :)
scratt
2007-10-04
Nice, too bad it wont be visible if you have a graphics with progressive loading, which has almost any format nowadays
Jansen
2007-10-12
Really clever!
=
Nathan Chapman
2007-10-15
This worked well, however I changed it so it applied to every image, like so:
img { background:url(preloader.gif); }
Still, good idea!
Magnate
2007-10-16
This is really nice. I will make sure i use this for my web.
Thanks
Vanqy
2008-03-08
Nice!I have been transshipped it to my forum and translated it into Chinese!Thanks!
Raghavendra
2008-11-25
Its really nice to see this but i wanted to set preloader for my blogspot i have adopted your method can you pleas help me out on this i will be great full to you ...
shrikant
2008-12-03
Thanxxxxxxxxxxxxxxxxxxxxxxxxx