Image loading event (onload) and loading status (complete)

This article describes how to use the onload and complete operations of an image.

Previously, we had to scale the merchant pictures on the merchant page according to the size of the box outside the image. The previous idea was to first output the image src on the page, then initialize js at the bottom of the page, and then write a function in js that allows the image to scale proportionally according to the box size. To achieve proportional scaling of images, do the following,

First, obtain the width and height of the image.
Second, compare the width and height of the image with the width of the box. There are four situations,

# If the width and height of the image are smaller than the width and height of the box, you can directly center the top, bottom, and left of the image,
# If the width of an image is greater than the width of the box and the height is smaller than the height of the box, scale the image according to the width and other proportions, and then vertically center the image,
# If the image height is greater than the box height and the width is smaller than the box width, scale the image according to the height or other proportions, and then center the left-right corner,
# If the width and height of an image are greater than the width and height of the box, calculate the ratio of widht and height of the image to width and height of the box, respectively, use a smaller value as the scaling ratio, and then center the top, bottom, and left.

Third, place the image to the corresponding img node.

Steps 2 and 3 are better implemented .. else loop can be done, but for the first step, how to obtain the width and height of the image is a key problem to be solved. The previous idea was to directly input the image src on the page, then scale down the image proportion, but there is a problem, that is, the image will first show the original size, and then wait for the scale to scale down, in this way, the user experience is very poor. Therefore, we should first consider that we can first make the image visiblility: hidden, and then let the image visibility: visible when js calculates the image size, in this way, although the effects can be achieved, there are some restrictions, because after all the Page code is loaded, the image may not be loaded completely. If it is a small image, this method can be used to obtain the height and width of the original image. However, if the image is very large and the image has not been loaded, the Code stops running, the size of the image obtained in this way is not a real value. Therefore, the current problem is how to obtain the actual height and width of the image after the image is fully loaded. We naturally think of the onload method of the img object. img. onload is an event triggered when an image is loaded. The following is an example,

{Code}

The Code is as follows:	Copy code
<Input type = "button" name = "" value = "loading image" onclick00000000addimg('tt.jpg ') "/> <Script type = "text/javascript"> Function addImg (isrc) { Var Img = new Image (); Img. src = isrc; Img. onload = function () { Document. body. appendChild (Img ); } } </Script>

{Code}

When the page is opened, click the button to display tt.jpg. What if I click it again? In IE, except that the image is normally displayed when it is loaded for the first time, it does not respond when you click it again, and the refresh is the same. FF, each click to load a picture. And why? Is it because only one onload or cache is executed in IE? First, rewrite the code,

{Code}

The Code is as follows:	Copy code
<Input type = "button" name = "" value = "loading image" onclick00000000addimg('tt.jpg ') "/> <Script type = "text/javascript"> Function addImg (isrc) { Var Img = new Image (); Img. onload = function () { Document. body. appendChild (Img ); } Img. src = isrc; } </Script>

{Code}

Now click the image again, and it will be normal. It is not because IE does not trigger the onload event, but because the speed of loading the buffer in IE is too fast, so that it does not run to img. the image has been loaded during onload. Therefore, you can first tell the browser how to process the image and then specify the source of the image. In general, you can use complete to determine whether the image has been loaded. For the complete attribute, IE is determined based on whether the image is displayed. That is to say, when the loaded image is displayed, the value of the complete attribute is true; otherwise, it is always false, it has nothing to do with whether the image has been loaded before, that is, it has nothing to do with the cache! You can write the following functions to ensure the compatibility of preloaded images in various browsers.

The Code is as follows:	Copy code
{Code} Var imgLoad = function (url ){ Var img = new Image (); Img. src = url; If (img. complete ){ Callback (img. width, img. height ); } Else { Img. onload = function (){ Callback (img. width, img. height ); Img. onload = null; }; }; }; {Code}