To_about image pre-loading

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 callback (img); return; // directly return, no need to process the onload event} img. onload = function () {// call the callback function asynchronously when the image is downloaded. Callback (img );};};

 

I searched for related articles on the Internet. This is basically the idea.

This method is okay, but there are some hidden dangers.

1. A temporary anonymous function is created as the onload event processing function of the image to form a closure.

I believe you have seen the article on Memory leakage mode in ie. One of the modes is loop reference, the closure has the ability to save the external running environment (depending on the implementation of the scope chain), so img. the onload function saves references to img internally, which forms a circular reference, resulting in Memory leakage. (In this mode, memory leakage only exists in ie6 of earlier versions, and ie6 with patches and Internet Explorer of later versions solve the memory leakage problem caused by loop reference ).

2. Only static images are loaded, while gif and other dynamic images are ignored. These dynamic images may trigger onload multiple times.

In ie and opera, the initial status of cached images is different from that in firefox, safari, and chrome (if you are interested, you can use different browsers, test the img status before assigning the cached image url to the src of img), but the onload event is triggered in the same way, no matter what browser. The root cause of this problem is that the src assignment of img is bound to the onload event, and the order is wrong (in ie and opera, src is assigned first, and onload is assigned again, because the image is cached, the onload event is missed ). Bind the onload event first and assign a value to src. 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. onload = function () {img. onload = null; callback (img);} img. src = url;} This memory leakage solves the problem of loading dynamic images, and implements callback calls in a unified way.

Turn: http://www.cnblogs.com/rt0d/archive/2011/04/17/2018646.html