Preloading images refers to loading images into browser cache prior to displaying them, and is used when you wish certain images to be revealed instantly when called upon (such as in a rollover effect). Use this script to preload any number of images easily.

For this you just need to simply insert the below into the <head> section of your page:

<script>
if (document.images) {

img1 = new Image();

mg1.src = “wp-content/themes/twentyten/images/drop-menu-background.png”;

img2 = new Image();

img2.src = “wp-content/themes/twentyten/images/drop-menu-hover-background.png”;

img3 = new Image();

img3.src = “wp-content/themes/twentyten/images/content-left-image.jpg”;

img4 = new Image();

img4.src = “wp-content/themes/twentyten/images/content-left-image.jpg”;

img5 = new Image();

img5.src = “wp-content/themes/twentyten/images/content-middle-image.jpg”;

img6 = new Image();

img6.src = “wp-content/themes/twentyten/images/content-right-image.jpg”;

}

</script>

Change the paths of the images to be preloaded to the required images to preload them.

Latest posts by kajal

  • Share/Bookmark