Javascript preload images

To access an image file in user computer you can use "Preloading". Preloading helps you to load an image file in the user computer. it’s very helpful like if you have a mouseover event and you want to change an image instantly, so it will help you to change an image

Step 1: Simple and Nice

If you want to preload an image on your webpage then use given below code (Add your desired image name into this code.)

<script type="text/javascript">
if (document.images) {
img1 = new Image();
img1.src = "image.jpg";
}
</script>

By using duplicating image line you can add more than one image in your script.

<script type="text/javascript">
if (document.images) {
img1 = new Image();
img1.src = "image.jpg";
img2 = new Image();
img2.src = "image2.jpg";
}
</script>

Step2 : Flexible Array method:

If you are using an external JavaScript file, that is already used on multiple pages, then you can use this code or method.

To preload same images on all the different pages use the below-given code. To start this first you have to add the given code in your main JavaScript file

function preload(images) {
if (document.images) {
var i = 0;
var imageArray = new Array();
imageArray = images.split(',');
var imageObj = new Image();
for(i=0; i<=imageArray.length-1; i++) {
//document.write('<img src="' + imageArray + '" />');// Write to page (uncomment to check images)
imageObj.src=imageArray;
}
}
}

After adding this code, when you call main java script then add following code given below in your <head> webpage.

<script type="text/javascript">
preload('image1.jpg,image2.jpg,image3.jpg');
</script>

Click to expand...

You can add as many images as you want but always separate them with using a comma.

NOTE: Replace your required file name in given code.

Step3: without using JavaScript

If you want to upload an image without using javascript then you can also do this with using 1-pixel square version

<image src="picture.jpg" width="1" height="1" border="0">

Click to expand...

Javascript preload images

More resources from bhawanisingh

Share this resource