Image Object in js and its pre-loading processing example _ javascript tips-js tutorial

There are often some image links on the current webpage. When you point to it, the image is replaced with another image. They are pre-read images first, and there is also a good example below, if you are interested, refer to the Image objects not displayed in the document.

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

The Code is as follows:

Var myImage = new Image (); or
Var myImage = new Image ( <图片地址字符串> );

Then you can treat the myImage variable like an Image object. However, since it is not displayed in the document, the following attributes: lowsrc, width, height, vspace, heat ace, and border are useless. Generally, only one such object is used: preload ). When the object's src attribute is assigned a value, reading the entire document and running JavaScript are paused, allowing the browser to read the image intently. After pre-reading the image, the image Copy will be available in the browser cache. when you really want to put the image in the document, the image will be immediately displayed. Currently, some images are often connected on webpages. When you point to it, the images are replaced with another one. They are pre-read images first.

JavaScript example of preread Images

The Code is as follows:

Var imagePreload = new Image ();

ImagePreload. src = '001.gif ';
ImagePreload. src = '002.gif ';
ImagePreload. src = '003.gif ';

The preceding example is suitable for prereading a small number of images.

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 prereading a large number of images.

Because many browsers have cache problems. After an image is loaded once, if a request is sent to the image again, the browser will not initiate a new request because the image has been cached, instead, load it directly in the cache. After analysis, you can use the attribute of the Image compatible with each browser-complete. Therefore, you can determine the value before the image onload event, as shown in the following example:

The Code is as follows:

Function loadImage (url, callback ){
Var img = new Image (); // create an Image object to implement pre-download of the Image
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 handling the onload event
}

Img. onload = function () {// call the callback function asynchronously when the image is downloaded.
Callback. call (img); // replace this of the callback function with the Image object.
};
};