The JavaScript Source: Image Effects : Image Preloader

Internet.commerce

Internet.com

IT
Developer
Internet News
Small Business
Personal Technology

Search internet.com
Advertise
Corporate Info
Newsletters
Tech Jobs
E-mail Offers

Great Sites

DocJavaScript.com
dhtml.com
The Freebie Directory
TheFreeSite.com

Browse Doc JS's Tips!

Promotions

Free Announcements

General

This script will preload images to enable your pages to load faster. Place the images in one directory and make sure they have all the same extension (defaults to "jpg").

See the demo here

Notes

Created by: Jeroen Haan
Web Site: http://www.haan.net
Posted: March 19, 2007

Source Code

Paste this source code into the designated areas.

External file

Paste this code into an external JavaScript file named: imagePreloader.js

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com

/* -----------------------------------------------
  Image Preloader - v.1.1
  (c) 2007 http://www.haan.net
  You may use this script but please leave the credits on top intact.
  Please inform us of any improvements made.
  When useful, we will add your credits.
------------------------------------------------ */

function preload() {
 	var brochure = new Array();
 	var pics = preload.arguments;
 	var dir = '/images/img/img_' // path to images
 	for (i=0;i<pics.length;i++) {
  		brochure[i] = new Image();
  		brochure[i].src = dir + pics[i] + '.jpg'; // change file extension, if necessary.
 		// uncomment next line for testing; click OK to continue loop and cancel to break
 		// if(!confirm(brochure[i].src)) break;
 	}
}

// call the function with the list of images (unique part of names)

// Multiple onload function created by: Simon Willison
// http://simon.incutio.com/archive/2004/05/26/addLoadEvent
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
 	preload('img1','img2','img3','img4','img5','img6','img7','img8','img9','img10','img11','img12');
});

Head

Paste this code into the HEAD section of your HTML document.


<script type="text/javascript" src="imagePreloader.js"></script>

Body

Paste this code into the BODY section of your HTML document


<a href="http://www.haan.net/test/preloader1.php" onclick="popUpDemo(this.href); return false;">See the demo here</a>

User Comments

Add a comment, suggestion, or correction

Comments feed

Do you write JavaScripts?
If you do, why not submit them to us?
We'll give you credit and a link back to your Web site.

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: Jayson
Not sure I understand?
10/24/2007 05:11:51

3. From: Lee (Admin)
10/26/2007 13:50:15

4. From: Jayson
PHP?
09/10/2008 04:30:28

5. From: Lee (Admin)
10/31/2008 15:23:10

1. From: martin
05/13/2007 11:40:33

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

Navigation Menu

Internet.commerce

Internet.com

Developer Channel

Great Sites

Promotions

General

Notes

Source Code

External file

Head

Body

User Comments

2. From: JaysonNot sure I understand?10/24/2007 05:11:51

3. From: Lee (Admin)10/26/2007 13:50:15

4. From: JaysonPHP?09/10/2008 04:30:28

5. From: Lee (Admin)10/31/2008 15:23:10

1. From: martin05/13/2007 11:40:33

Whitepapers and eBooks

Webcasts

Downloads and eKits

Tutorials and Demos

2. From: Jayson
Not sure I understand?
10/24/2007 05:11:51

3. From: Lee (Admin)
10/26/2007 13:50:15

4. From: Jayson
PHP?
09/10/2008 04:30:28

5. From: Lee (Admin)
10/31/2008 15:23:10

1. From: martin
05/13/2007 11:40:33