• 1
  • 2
Home > Tips

JavaScript Preload Images - How to Preload Images with JavaScript?



 JavaScript Preload Images - How to Preload Images with JavaScript?

Do you want to preload images on your web page? Your answer must be Yes because preloading images will make your web page load faster then before, this means your visitors dont need wait too much time to view the images on your web page.

In this article, I will teach you how to preload images with JavaScript. I hope it will be helpful to you.



 Method One: Place the below JavaScript Preload Images Codes between the <head></head> Tags

Below are the codes for JavaScript preload images, please simply copy them and then paste them into the <head></head> tags of your web page.

<script type='text/javascript'>
if (document.images) {
img1 = new Image();
img1.src = 'JavaScript-Preload-Images.jpg';
}
</script>

Note: To preload your own images, please simply replace our image JavaScript-Preload-Images.jpg with your own image, for example, your-own-image.jpg.

If you want to preload more images, please simply copy these codes:

img1 = new Image();
img1.src = 'JavaScript-Preload-Images.jpg ';

And then paste them under the first image. Note: Please dont forget to replace the first image with your new images.

<script type='text/javascript'>
if (document.images) {
img1 = new Image();
img1.src = ' JavaScript-Preload-Images.jpg ';
img2 = new Image();
img2.src = ' JavaScript-Preload-Images-1.jpg ';

}
</script>




 Method Two: Using External JavaScript File to Preload Images on Different Pages

Many web designers like using an external JavaScript file to define different pages. This is good because it will make web pages cleaner and more organized. If you also have an external JavaScript file that is used by different pages. The below method will help you easily preload images with JavaScript.

Step 1: add the following function to your external 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[i] + '' />');// Write to page (uncomment to check images)
imageObj.src=imageArray[i];
}
}
}

Step 2: Add the following JavaScript Preload Images Codes to the <head></head> tags of your web pages.

Note: Here we assume that you've called the external JavaScript file for the web pages.

<script type='text/javascript'>
preload('javascript-preload-images-1.jpg, javascript-preload-images-2.jpg, javascript-preload-images-3.jpg');
</script>

Please dont forget to replace our images with your own images. You can preload as many as you like, just make sure that they are separated by a comma.



 Method Three: Preload Images Using SliceMaker Products.

SliceMaker products also use JavaScript preload images; it is one of the easiest ways to preload images even if you have little skills on programming.

If you cannot understand how to preload images with JavaScript through the above methods, please click here to learn how to preload images with SliceMaker products >>

Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0