먼저 이 이상한 버그의 배경을 설명하겠습니다.
페이지가 로드될 때 여러 개의 작은 축소판을 로드합니다.
너무 많은 작은 썸네일 라벨이 루프로 타일링되어 있고, 작은 사진을 클릭하면 로드됩니다. 동적으로 대형 사진 디스플레이는 Taobao에서 제품 사진을 보는 것과 유사합니다. 페이지에 태그가 있습니다:
트래픽을 절약하기 위해 페이지 로딩 속도를 높이기 위해 사용자가 작은 이미지를 클릭하면 큰 이미지가 먼저 로드되어 표시됩니다.
<script> (im) <br>{ <br>document.getElementById('big-image').src=im; <br>} <br></script>
이 방법은 다음에서 작동합니다. IE6,7 IE8, Firefox, Opera, Chrome, Safari 등 다른 모든 브라우저는 정상적으로 작동합니다. . .
IE6, 7 두 브라우저에서는 썸네일을 클릭하면 로딩이 되는 경우도 있고, 반만 로딩되는 경우도 있고, 로딩이 안되는 경우도 있습니다.
src에 문제가 있다고 생각했습니다. src를 수정한 후 IE6 및 7에서 이미지를 올바르게 로드하지 못할 수도 있으므로 전환 기능을
document.getElementById('pic-box')로 수정해 보았습니다. innerHTML='
'
IE6과 7은 여전히 작동하지 않아서 이미지가 캐시된 것 같아서 임의의 숫자를 추가했습니다:
document .getElementById('pic -box').innerHTML='
';
IE6 및 7은 여전히 작동하지 않습니다. .
그래서 innerHTML에서 img를 사용하는데 문제가 있지 않을까 생각해서 AppendChild로 변경했습니다.
var img = document.createElement('img')
img.src= im;
document.getElementById('pic-box').appendChild(img)
아직 작동하지 않습니다.
새 이미지를 사용하도록 수정:
var img = new Image();
img.src= im
document.getElementById('pic-box').appendChild( img );
아직 작동하지 않습니다.
IE6과 7에서는 이미지를 동적으로 로드할 수 없나요? img 태그에 문제가 있는 걸까요?
이 경우에는 대신 배경 이미지를 로드하므로
document.getElementById('pic-box').style.Background="url(" im ")"
IE6 및 7은 여전히 그렇습니다. IE6 및 7을 제외하고 위의 모든 방법은 정상입니다.
Google만 논스톱이며 결과는 다음과 같습니다.
IE6 및 7은
이 상황은 이미지가 동적으로 로드될 때 발생합니다. Google에서 찾은 설명:
배불러서 할 일이 없는 여러 외국인이 반복적으로 테스트한 결과 이 문제가 IE6의 기본 메커니즘이라는 것을 발견했습니다. 후속 버전에서는 버그가 해결되었습니다.
이러한 방식으로 a 태그를 사용하는
또는 태그가 일부 동작을 트리거하는 것을 막지는 못한다고 합니다.
ie6으로 이어지는 페이지가 새로고침되거나 리디렉션되어 현재의 모든 연결이 중단되어 새로운 사진 로딩이 중단된 것으로 착각하게 됩니다
물론 배불러서 아무것도 가진 것이 없는 이 외국인들
두 가지 가장 간단한 방법이 있는데, 하나는
사실 IE6뿐만 아니라 IE7에도 이 버그가 있는 것을 발견했으며 다음을 사용했습니다. 로는 문제가 해결되지 않습니다. 🎜>
그래서 a 태그를 다른 태그로 교체하는 것이 좋습니다. 결국 분노에 찬 태그를 모두span으로 교체했습니다. 그 이후로 이 문제는 한 번도 발생하지 않았습니다. 다시 발생했습니다.