Javascript Image Preloader

Very often we find ourselves in the need of showing a preloader bar until our server finishes a job. For example let’s take a search page. Our database it’s already huge and full of information and the visitor is searching for a very common string that will bring back many results. There’s a lot of work for that server and our visitor doesn’t knows that. He’s seeing a blank page that is there for too long maybe. He will start thinking that the page went blank and the results will never gonna show up. He’s gone. What do you do? I’ll tell you… You are losing visitors.

A very good way of keeping that visitors on your page until the server finishes the job is by displaying a javascript image preloader. As it’s named it will preload some content. The page will display a friendly image of your choice and I recommend some Ajax loading images which are very stylish and so often used and searched on the web today.

By showing this javascript preloader and informing your visitors that the server is working and also (!very important) nothing’s wrong you will keep them on your page.

There are a lot of tests out there showing that the most pages used last are the search pages so here’s an elegant solution, used by huge websites out there, the javascript image preloader.

Don’t forget to download the zip that contains the images for this preloader script. You can play along with it and I encourage you to do so. Here’s a demo.

Thank you for reading this,
Mihalcea Romeo

<title>Preload Image Page</title>
<script language="JavaScript1.1">
<!-- begin hiding

Preload Image With Update Bar Script (By Marcin Wojtowicz [])
Submitted to and permission granted to to feature script in it's archive
For full source code to this script and 100's more, visit

// You may modify the following:
	var locationAfterPreload = "" // URL of the page after preload finishes
	var lengthOfPreloadBar = 150 // Length of preload bar (in pixels)
	var heightOfPreloadBar = 15 // Height of preload bar (in pixels)
	// Put the URLs of images that you want to preload below (as many as you want)
	var yourImages = new Array("")

// Do not modify anything beyond this point!
if (document.images) {
	var dots = new Array() 
	dots[0] = new Image(1,1)
	dots[0].src = "black.gif" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
	dots[1] = new Image(1,1)
	dots[1].src = "blue.gif" // color of bar as preloading progresses (same note as above)
	var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
	var loaded = new Array(),i,covered,timerID
	var leftOverWidth = lengthOfPreloadBar%coverage
function loadImages() { 
	for (i = 0; i < yourImages.length; i++) { 
		preImages[i] = new Image()
		preImages[i].src = yourImages[i]
	for (i = 0; i < preImages.length; i++) { 
		loaded[i] = false
function checkLoad() {
	if (currCount == preImages.length) { 
	for (i = 0; i <= preImages.length; i++) {
		if (loaded[i] == false && preImages[i].complete) {
			loaded[i] = true
			eval("document.img" + currCount + ".src=dots[1].src")
	timerID = setTimeout("checkLoad()",10) 
// end hiding -->


<body bgcolor="#FFFFFF">

<font size="4">Please be patient while some images<br>
are being preloaded...</font><p>
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
if (document.images) {
	var preloadBar = ''
	for (i = 0; i < yourImages.length-1; i++) {
		preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
	preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write('<p><small><a href="javascript:window.location=locationAfterPreload">Skip Preloading</a>  |  <a href="">Script Credits</a></small></p>')
// end hiding -->

Leave a Comment!