[JavaScript New Image ()] New Image () object explained

Create an Image object:var a=new image ();    Defines the src: a.src= "Xxx.gif" of the image object; This is equivalent to caching a picture for the browser.

Image object:

Build Image object: Image Object name =new images ([width],[height])

Properties of the Image object: border Complete height hspace lowsrc name src vspace width

Events for Image objects:onabort onerror onkeydown onkeypress onkeyup onload

It is important to note that the SRC attribute must be written to the back of the onload, or the program will fail in IE.

var img=New Image ();

2. img.onload=function () {Alert ("IMG is loaded")};
4. img.onerror=function () {alert ("error!")};
6. img.src="Http://www.abaonet.com/img.gif";
8. Function Show () {alert ("body is Loaded");};
10. window.onload=Show;

After running the above code, testing in different browsers, found that IE and FF are different, in the FF, the loading of the IMG object is contained in the body

During the loading process, the body is loaded and the Window.onload event is triggered after the IMG load is complete.

In IE, the loading of an IMG object is not included in the body loading process, the body is loaded, and when the Window.onload event is triggered, the img

The object may not have finished loading, and the Img.onload event will fire after Window.onload.

Based on the above problem, consider the browser compatibility and page load time, try not to put too many images in the image object, otherwise under the FF

will affect the download speed of the page. Of course, if you do a pre-load function after window.onload, there will be no FF problems.

You can detect whether an image is loaded by using the complete property of the Image Object (each image object has a completed property when the image is in

When loading, the property value is False, and after any event in onload, onerror, or onabort occurs, the image loading process is completed (regardless of

Not successful), at which time the complete property is true)

2. var img = new Image ();
4. IMG.SRC = oimg[0]. src = this.src.replace (/small/, "big");
6. ODiv.style.display = "Block";
8. Img.complete? ODiv.style.display = "None": (Oimg[0]. onload = function () {oDiv.style.display = "None"})

Note:

The onload event of the image object is supported by popular browsers such as IE Firefox.

IE8 and below, Opera does not support onerror Events

[JavaScript New Image ()] New Image () object explained