Sopov.com freelancer, html and css tips and tricks

How to add images preload without JS

In this article I want to explain how to add images preload with CSS. Web site visitors hate to wait, so many Web designers preload images to speed up page display. Although JavaScript is the most common way to preload images, it isn't your only option. Consider using the CSS DISPLAY property instead. It may be more reliable and it requires less complex code.

First variant - using CSS property: DISPLAY: NONE

Fortunately, Cascading Style Sheets (CSS) offer you an easy and reliable option. Using the DISPLAY property, you can tell the browser to request an image, but NOT to display it on the page. The browser just requests the image from the server and caches it for future use.

First of all, we need to create class with display none, and add it to the Head of page:

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

Or simple add this class in your_style.css

.preloadImg {display:none;}

Next we have to add preload images to Your HTML home page. I recommend add this code to the bottom of your home page.

<img class="preloadImg" src="/my_preload_image.jpg" alt="Don't forget to add ALT" title="Don't forget to add Title" height="100" width="100" />

Note: don't forget to add class preloadImg for the all preload images

Second variant - using CSS Sprites

In my previous articles a completely explain what is CSS sprites (Image sprites). I use this method for rollover menu. So in this article i'll show just a method:

Create a new image that is as wide as your widest image and and as tall as the combined height of all your images plus X pixels, where X is the number of images you have. Now place you images into this new image, left aligned, one on top of the other with one pixel of white space in between.

Notice in the CSS that there is a single background-image applied to the anchor element itself, and the unique classes merely shift the background position with negative Y coordinates.

#nav li a { background-image: url('/../img/image_nav.gif') }

#nav li a.item1 { background-position: 0px 0px }
#nav li a:hover.item1 { background-position: 0px -72px }

#nav li a.item2 { background-position: 0px -143px }
#nav li a:hover.item2 { background-position: 0px -215px }

So what we've got. The browser display only first image and the others will not display.

And the last one, if You are the fan JS code

If You want to add JS preload to your page add:

<script_type="text/javascript"_language="JavaScript">
var name_image=new Image(width, heght)
name_image.src=URL
</script>

For example we want to preload image with name 'xxxx.jpg' form 'images' folder:

<script_type="text/javascript"_language="JavaScript">
 var xxxx.jpg=new Image(450px, 100px)
xxxx.jpg.src="/../images"
 </script>

Ugh. I spent 2 hours to write this article and i hope it will help You :). And if you have any questions, leave me a comment.