After watching Manchester United and Manchester City Derby, there is still a long two hours to see the expected country derby. Bored very, about nothing, then to the forum to hang out. See a chapter on picture preload, with the following code:
Copy Code code as follows:
function LoadImage (URL, callback) {
var img = new Image (); Create an Image object to achieve a pre-download of the picture
img.src = URL;
if (img.complete) {//If the picture already exists in the browser cache, call the callback function directly
Callback (IMG);
Return Return directly without handling the OnLoad event
}
Img.onload = function () {////callback functions are called asynchronously when the picture is downloaded.
Callback (IMG);
};
};
On the Internet to search for a related article, is generally the idea.
The function of this method is OK, but there are some hidden trouble.
1 creates a temporary anonymous function to act as the OnLoad event handler for a picture, forming a closure.
I believe that we have seen IE under the memory leak mode of the article, which has a pattern is circular reference, and closures have the ability to save external operating environment (dependent on the implementation of the scope chain), So img.onload This function internally also holds a reference to IMG, which forms a circular reference that results in a memory leak. (This mode of memory leak only exists in the lower version of the IE6, the patched IE6 and the high version of IE all solve the problem of memory leaks caused by circular references).
2 only considered the static picture loading, ignoring the GIF and other dynamic pictures, these dynamic pictures may trigger the onload multiple times.
To solve the above two problems is very simple, in fact, the code is as follows:
Copy Code code as follows:
Img.onload = function () {
The callback function is called asynchronously when the picture is downloaded.
Img.onload = null;
Callback (IMG); };
This can not only solve the problem of memory leakage, but also avoid the event of dynamic picture multiple triggering problems.
In some of the relevant blog posts, some people also noticed that to set the img.onload to NULL, but the timing is not right, most of the articles are after callback run, The img.onload is set to NULL, which can solve the problem of circular references, but for dynamic pictures, if the callback run more time-consuming, there are many pitfalls.
The hidden danger is eliminated after the above modification, but the code has room for optimization:
Copy Code code as follows:
if (img.complete) {
If the picture already exists in the browser cache, call the callback function directly
Callback (IMG);
Return Return directly without handling the OnLoad event
}
For this code, look at the narrative of the related Bovenri for the following reasons:
After a number of browser versions of the test, found in IE, opera, when the picture after loading once, if there is a request for the picture, because the browser has already cached this picture, will not launch a new request, but directly from the cache load. For Firefox and Safari, they try to make these two loading methods transparent to the user, also cause the image of the OnLoad event, while IE and opera ignore this identity, does not cause the image of the OnLoad event, so the above code in them can not be achieved.
Indeed, under Ie,opera, the initial state of the cached picture is not the same as under Firefox and Safari,chrome (if you are interested, you can test the status of the IMG before the URL to the SRC assignment cache image to the IMG) in different browsers, But the onload incident trigger, but is consistent, no matter what browser. The root cause of this problem is that the SRC assignment of IMG and onload event binding, the wrong order (in IE and opera, the first assignment of SRC, and then assign the onload, because it is cached pictures, it missed the OnLoad event trigger). You should bind the OnLoad event first and then assign a value to SRC, as follows:
Copy Code code as follows:
function LoadImage (URL, callback) {
var img = new Image (); Create an Image object to achieve a pre-download of the picture
Img.onload = function () {
Img.onload = null;
Callback (IMG);
}
img.src = URL;
}
Such memory leaks, dynamic picture loading problems have been solved, but also in a unified manner, to achieve the callback call.
