CSS Image Preloads
It can be useful on occasions to preload an image. This means the image is loaded with the page. Not after it.
For example, you have two images. One of a car and one of a motorbike. When you hover over the car with the mouse, it changes to the motorbike. The first time you hover over the car however, there is a delay while the motorbike image is downloaded. This is because the motorbike image was not preloaded.
Javascript can be used to preload an image. This is not ideal however as it’s a little tricky and not all browsers support javascript.
The easiest solution is to use CSS. The code below will preload the motorbike image:
<img src=’images/motorbike.jpg’ alt=”Motorbike” style=’display:none;’ />
A better way is to create a class. Assign this to any images that need preloading:
<style type=’text/css’>
.preloads {display:none;}
</style>
<img src=’images/motorbike.jpg’ alt=”Motorbike” class=’preloads’ />
Image preloading can also be used to load images for a different page. Once the browser has cached the image it will be there whenever it’s required. For example, you may preload product images in your index.html file, ready for when a user clicks on your products page.
By putting the image preload CSS code at the bottom of the index.html file, the preloading will happen after the content has been sent to the screen. Therefore the user is not waiting for content to appear.
Hope this helps and thanks for reading.
No comments yet.