The image object in JS and its preload processing example _javascript tips

An Image object that does not appear in the document

Defined with the Var statement for an Image object that is not displayed in the document:

Copy Code code as follows:

var myimage = new Image ();
var myimage = new Image (< image address String >);

You can then treat myimage variables like a generic Image object. But since it doesn't appear in the document, the following properties: lowsrc, Width, height, vspace, hspace, border no use. Generally this object has only one use: Read-only image (preload). Because when you assign a value to the SRC attribute of an object, the entire document reads, JavaScript runs, and the browser concentrates on reading the picture. After the image is read, the browser's cache has a Copy of the picture, to the real picture in the document, the picture can be immediately displayed. Today's web pages often have some image connection, when the mouse points to it, the image replaced by another image, they are first read the image.

JavaScript examples of pre-read images

Copy Code code as follows:

var imagepreload = new Image ();

IMAGEPRELOAD.SRC = ' 001.gif ';
IMAGEPRELOAD.SRC = ' 002.gif ';
IMAGEPRELOAD.SRC = ' 003.gif ';

The above example is suitable for pre-read a small number of pictures.

Copy Code code as follows:

function Imagepreload () {
var imgpreload = new Image ();
for (i = 0; i < arguments.length; i++) {
IMGPRELOAD.SRC = Arguments[i];
}
}

Imagepreload (' 001.gif ', ' 002.gif ', ' 003.gif ', ' 004.gif ', ' 005.gif ');

The above example is suitable for pre-read a large number of pictures.

Because there are caching problems with many browsers. Once the picture has been loaded once, if there is another request for the picture, because the browser has already cached this picture, will not launch a new request, but directly to the cache to load, after analysis, you can use the browser compatible with the properties of the image--complete. So before the photo onload event, make a judgment on the value, as the following example:

Copy Code code as follows:

function LoadImage (URL, callback) {
var img = new Image ();//Create an Image object , the implementation of the image of the pre-download
img.src = URL;

if (img.complete) {//If the picture already exists in the browser cache, call the callback function
Callback.call (IMG) directly;
return;//returns directly without handling the OnLoad event
}

Img.onload = function () {//callback functions are called asynchronously when the picture is downloaded.
Callback.call (IMG);//replaces this of the callback function with the image object
};
};