Image Preload

Introduction

Image Preload is a small, leightweight and easy to use Javascript Class to Preload Images on a Website.

This Project is currently under CreativeCommons 3.0 Licence and can be used for personal and commercial projects. If you wanna make changes feel free to copy the code but it would be nice if you could leave the author name, author link and the license info.

You will get the source code and the example at Google Code. Feel free to Commit Changes and report bugs.

So now you’ll get some Infos how to use this small Class.

Requirements

  • PrototypeJS (>1.6)
  • Moderate Knowledge of Javascript and HTML

Usage

This class is really easy to use. Just follow these steps:

  • load the Javascript Files in the correct order; I’m using a css class where i can hide the whole side to show the preloading status first and when the preloading is finished i hide my status field and switch to the site.
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles/home.css">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/imagepreload.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", INIT_indexpage );
</script>
</head>
  • Start Javascript function when the Startpage is loaded
<html>
<head>
<title>Title</title>
<link rel="stylesheet" type="text/css" href="styles/home.css">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="imagepreload.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", INIT_indexpage );
</script>
</head>
  • Now lets implement the INIT_indexpage function! You only have to create an array with all the pictures you want to preload in it. Watch out to enter the correct path to the pics.
function INIT_indexpage()
{
var Images = new Array('pics/pic_01.gif','pics/pic_02.gif','pics/pic_03.gif','pics/pic_04.jpg','pics/pic_05.gif');
new ImagePreload( Images, INIT_PreloadFinishAction, INIT_UpdateLoadingStatus );
}
  • To give the visitor of your page the feeling that your site is doin something in the background you can update the status of your preloading. I prefer the way to Update a text where the status is printed in percent.
function INIT_UpdateLoadingStatus( percentage )
{
$('loadpercentage').update( "loading "+percentage+" %");
}
  • When the loading is finished you can also do some action.
function INIT_PreloadFinishAction()
{
$('loaddiv').addClassName('index_invisible');
$('centerpage').removeClassName('index_invisible');
}
  • Put these three functions into the Javascript script-Tag and Upload it all to your Website => FINISH

Complete Source of Test Page

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="imagepreload.js"></script>
<script type="text/javascript">
document.observe("dom:loaded", INIT_indexpage );

/*
* Function is called when the loaded Event is fired
*/
function INIT_indexpage()
{
var Images = new Array('pic_01.bmp','pic_02.bmp','pic_03.bmp','pic_04.bmp','pic_05.bmp');
new ImagePreload( Images, INIT_PreloadFinishAction, INIT_UpdateLoadingStatus );
}

/*
* Function to perform Actions when preloading is finished
*/
function INIT_PreloadFinishAction()
{
$('loaddiv').addClassName('index_invisible');
$('centerpage').removeClassName('index_invisible');
}

/*
* After every Pic the Status gets updated
*/
function INIT_UpdateLoadingStatus( percentage )
{
$('loadpercentage').update( "loading "+percentage+" %");
}
</script>
<style type="text/css">
.index_invisible{ display:none; }
</style>
<title>Preloading Testpage</title>
</head>
<body>
<div id="loaddiv" class="loaddiv">
<div id="loadpercentage"></div><br/>
<!--[if lte IE 6]>
This site is not optimized for IE 6.0<br/>
Please use a modern Browser or simply update to IE 7.0
<![endif]-->
</div>
<div id="centerpage" class="index_invisible">
Your content!<br/>
<img src="pic_01.bmp" alt="Pic01"/><br/>
<img src="pic_02.bmp" alt="Pic02"/><br/>
<img src="pic_03.bmp" alt="Pic03"/><br/>
<img src="pic_04.bmp" alt="Pic04"/><br/>
<img src="pic_05.bmp" alt="Pic05"/>
</div>
</body>

</html>

Leave a Reply