Image object in js and its preloading processing example_javascript skills

Image objects not displayed in the document

For Image objects not displayed in the document, use the var statement to define:

Copy code The code is as follows:

var myImage = new Image(); or
var myImage = new Image();

Then you can treat the myImage variable like a normal Image object. However, since it does not appear in the document, the following properties: lowsrc, width, height, vspace, hspace, border are of little use. Generally, this kind of object has only one purpose: preloading images. Because when the src attribute of the object is assigned a value, the reading of the entire document and the execution of JavaScript are suspended, allowing the browser to concentrate on reading the image. After pre-reading the image, there is a copy of the image in the browser's cache. When it comes time to actually put the image into the document, the image can be displayed immediately. There are often some image connections in today's web pages. When the mouse points to it, the image is changed to another image. They all pre-read the image first.

JavaScript example of pre-reading images

Copy code The code is 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-reading a small number of pictures.

Copy code The code is 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-reading a large number of pictures.

Due to caching issues in many browsers. After the image is loaded once, if there is another request for the image, since the browser has already cached the image, it will not initiate a new request, but directly load it from the cache. After analysis, it can be Use the Image attribute --complete that is compatible with each browser. So just make a judgment on this value before the image onload event, as shown in the following example:

Copy code The code is as follows:

function loadImage(url, callback) {
var img = new Image(); //Create an Image object to pre-download images
img.src = url;

if (img.complete) { // If the image already exists in the browser cache, call the callback function directly
callback.call(img);
return; // Return directly without processing the onload event
}

img.onload = function () { //Asynchronously call the callback function when the image is downloaded.
callback.call(img);//Replace this of the callback function with the Image object
};
};