What you don't know about image pre-loading

After watching Manchester United and Manchester City's local derby, there is still a long two hours to see the expected national derby. Bored, nothing left or right, so I went to the Forum. The following code shows a blog post 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 directly.
Callback (IMG );
Return; // return directly without handling 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.
To solve the above two problems, the Code is as follows:
IMG. onload = function () {// call the callback function asynchronously when the image is downloaded.
IMG. onload = NULL;
Callback (IMG );
};
This not only solves the memory leakage problem, but also avoids the problem of multiple triggering of dynamic image events.
In some related blog posts, some people have noticed that IMG should be used. onload is set to null, but the timing is incorrect. Most articles only use IMG after the callback operation. onload is set to null, which can solve the problem of loop reference, but for dynamic images, if the callback operation is time-consuming, there is still a risk of multiple triggers.
After the above changes, the hidden risks are eliminated, but there is still room for optimization of this Code:
If (IMG. Complete) {// if the image already exists in the browser cache, call the callback function directly.
Callback (IMG );
Return; // return directly without handling the onload event
}
The reason for this code is as follows:
After tests on multiple browser versions, it is found that when an image is loaded once in IE and opera, if a request is sent to the image again, the browser has cached the image, instead of initiating a new request, the request is directly loaded from the cache. For Firefox and Safari, they try to make the two loading methods transparent to users, which will also cause image onload events, while IE and opera ignore this identity, it does not cause the onload event of images, so the above Code cannot achieve the effect in them.
Indeed, 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;
}
In this way, the problem of loading dynamic images is solved due to memory leakage, and callback is also implemented in a unified manner.