The images property (Array)

The images property is an array that has an entry for each image on a web page.
Another alternative would be to use length property as document.images.length to find out how many images are on the page.

Using this property you can detect what browser supports the Image Object in JavaScript.
This is useful if you want to preload an image which is a very good idea when using image rollover scripts or you want to place in viewer’s cache file a picture to use on other pages on the website, to make it load quicker.

if (document.images) {
	JavaScript code here
}

All is needed between parentheses is document.images.
If this property exists it returns true and the code inside the block is executed.
If the property doesn’t exist then the block is ignored.

If you want to preload an image then you have to create a new instance of the JavaScript Image object.

var NameOfTheVariable = new Image(width, height);

Of course you have to replace NameOfTheVariable with a meaningful name, and width and height with their correspondent values in pixels. The width and height parameters are optional.

The last thing you need to add is the source of the image so the browser knows where to take the image from. To do that you use the src property.

var HondaImage = new Image();
HondaImage.src = "MyHonga.jpg";

Note:
Preloading of an image is usually done in the head section of a document.
If you want to preload more than an image then you have to create an instance of the image object for each image you want to preload.

if (document.images) {
	var HondaImage = new Image(); //This is a new instance of the Image object
	HondaImage.src = "MyHonga.jpg"; //The value of src property
	
	/*Preload more than one image by creating
	an instance of the Image object for each image you want
	to preload.*/
	
	var YamahaImage = new Image();
	YamahaImage.src = "MyYamaha.jpg";
	
	var SuzukiImage = new Image();
	SuzukiImage.src = "MySuzuki.jpg";
}

Leave a Reply