Solve the problem of image onload event invalidation in IE

In the past two days, a simple Image Viewer is created, where "Previous Page" and "next page" are used, new image () is used for Image loading, and the src attribute of image is set, everything works normally in Google Chrome/Opera/FireFox. The Code is as follows:

Copy to ClipboardReference: [www.bkjia.com] var I = new Image ();
I. src = _ this. settings. imgs [_ this. currIndex];
// Baidu. dom. show (baidu. dom. query (selectPre + '# loading') [0]);
I. onload = function (){
Image. src = I. src;
Baidu. dom. hide (baidu. dom. query (selectPre + '# loading') [0]);
Baidu. dom. query ('#' + _ this. settings. formId + '. title ') [0]. innerHTML = I. src. replace (/(. * \/)/ig, '') + '-' + _ this. settings. title;
}

Test results:

However, in IE8/IE7, the problem occurs: When all the images are turned over or refreshed at a time, the images will not be displayed after clicking, the following figure shows the refresh result (the red image is the loading icon ):

Is the onload of the Image object invalid? When I try to bring up a dialog box in the onload event, IE is invalid, which confirms that the onload event has not occurred. I searched the following materials online:

When IE re-displays the image, it does not send the image from the server, but obtains the last cached image from the cache, so that the loading speed from the cache is very fast, therefore, the onload event has been triggered before onload is run, which causes the code in the onload event to fail to be executed.

In this case, we can write the onload event function before the statement that assigns a value to src. This solves the problem. The Code is as follows:

Copy to ClipboardReference: [www.bkjia.com] var I = new Image ();
// Baidu. dom. show (baidu. dom. query (selectPre + '# loading') [0]);
I. onload = function (){
Image. src = I. src;
// Baidu. dom. hide (baidu. dom. query (selectPre + '# loading') [0]);
// Baidu. dom. query ('#' + _ this. settings. formId + '. title ') [0]. innerHTML = I. src. replace (/(. * \/)/ig, '') + '-' + _ this. settings. title;
}
I. src = _ this. settings. imgs [_ this. currIndex];