Image Preloader

Posted By: Ian on Mar 13, 2011 in CSS, Snippets

This is the image preloader as used in 4x Random Image Viewer. Preloading images is ideal for lots of reasons like image viewers, slide shows, image roll overs and more. Some preloaders use javascript some load there images to the far left in this we just hide them.

CSS

Place this in your CSS file or in the <head> section of your page

<style type="text/css">
.hiddenPic {
display : none;
}
</style>

HTML

Place this just before the </body> tag

<!-- Start pre-loader -->
<p>
<img src="img/1.jpg" class="hiddenPic" />
<img src="img/2.jpg" class="hiddenPic" />
<img src="img/3.jpg" class="hiddenPic" />
<img src="img/4.jpg" class="hiddenPic" />
<img src="img/5.jpg" class="hiddenPic" />
<img src="img/6.jpg" class="hiddenPic" />
<img src="img/7.jpg" class="hiddenPic" />
</p>
<!-- End pre-loader -->	
AnonymousIan.J.Gough

Did this help you? Please Let me know by commenting below even if it’s just to say “Thanks”

leave a comment

About This Site

Dreams are built from lines of code well it's true!
If you can dream it you can usually code it.

I have learned so much from other people on the Internet and this site is for me to give back some of what i have learned and hope people can now learn from me.
Have fun and surf safely,
Ian.J.Gough

protected by copyscape duplicate content check

Categories


Powered by Banner Bar 125