Home >Web Front-end >JS Tutorial >js dynamically loading images under IE6 and IE7 does not display errors_javascript skills

js dynamically loading images under IE6 and IE7 does not display errors_javascript skills

WBOY
WBOYOriginal
2016-05-16 18:22:521222browse

Let me first describe the background of this bizarre bug:
I load a bunch of small thumbnails when the page is loading,
So many small thumbnail labels are tiled in a loop, and when a small picture is clicked, it is loaded dynamically Large picture display is similar to viewing pictures of products on Taobao. There is a tag on the page:


In order to save traffic, To speed up page loading, the large image is not loaded first. When the user clicks on the small image, a large image is dynamically loaded and displayed.

Copy code The code is as follows:

<script> <br>function switch_image(im) <br>{ <br>document.getElementById('big-image').src=im; <br>} <br></script>

This method works in IE6,7 All other browsers work normally, such as IE8, Firefox, Opera, chrome, and Safari. . .
The two browsers IE6 and 7 cannot load. When you click on the thumbnail, sometimes you can load it, sometimes it is half loaded, and sometimes it cannot be loaded.
I thought the problem was with src. It is possible that IE6 and 7 cannot load images correctly after modifying src, so I tried to modify the switching function to:
document.getElementById('pic-box').innerHTML=' ';
IE6 and 7 still didn't work, so I thought maybe the image was cached, so I added a random number:
document.getElementById('pic -box').innerHTML='';
IE6 and 7 still don't work. .
So I was thinking that there might be a problem with img being used in innerHTML, so I changed it to appendChild
var img = document.createElement('img');
img.src= im;
document.getElementById('pic-box').appendChild(img);
Still not working.
Modify it to use new image:

var img = new Image();
img.src= im;
document.getElementById('pic-box').appendChild( img);
Still not working.
I was puzzled and thought, can’t IE6 and 7 dynamically load images? Is it a problem with the img tag?
In this case, let’s load the background image instead, so
document.getElementById('pic-box').style.background="url(" im ")";
IE6 and 7 still don’t work. All the above methods are normal except for IE6 and 7.
Only Google non-stop, and the result is:
IE6 and 7 are only using
This situation occurs when images are loaded dynamically. An explanation found on Google:

Several foreigners who were full and had nothing to do repeatedly tested and found that this problem is an underlying mechanism in IE6. The bug has been solved in subsequent versions.
It is said that or using the a tag in this way does not prevent the a tag from triggering some behavior,
leading to ie6 They will mistakenly think that the page has been refreshed or redirected, and all current connections have been interrupted, so that the loading of new pictures is aborted
Of course, these foreigners who are full and have nothing to do also come up with all kinds of incredible and complicated ideas.

There are two simplest methods, one is to use the a tag like this
, the other is to replace the a tag with div.

In fact, I found that not only IE6, but IE7 also has this bug, and using:
does not solve the problem. 🎜>
So it is recommended to replace the a tag with other tags. In the end, I replaced all a tags with span in anger. Since then, this problem has never occurred again.