Javascript IE가이 코드를 실행하지 않는 이유는 무엇입니까?

Question

나는 모두 메뉴가있는 웹 사이트 (http://euroscala.balkanium.com/)를 만들고 메뉴 항목을 클릭하면 작은 이미지 목록이 나타납니다. 표시해야하는 모든 이미지를 미리로드하고 표시하려고합니다. IE (8 버전)를 제외한 모든 브라우저에서 정상적으로 작동합니다. 여기를 살펴 기꺼이 누군가를 위해 코드를 함께 넣어 가지고 : http://jsfiddle.net/THpgM/2/

나는 문제가 (바이올린에서 첫 번째 함수의 바닥 근처)이 코드 조각

img.onload = (function(i){ 
    // code here is executed 

    return function(){ 
    // code here is not 

    ++totalLoaded; 
    document.getElementById("li" + i).style.height = this.height + "px"; 
    document.getElementById("li" + i).setAttribute("data-height", this.height); 

    if(totalLoaded == totalThumbs){ 
     // do some stuff 
    } 
    }; 
})(i); 

에있다 생각

나는 이것을 알아 내려고 2 일을 보냈다. 누군가가 이것을 도와 주시면 큰 도움이 될 것입니다.

Answer 1

.src을 할당하기 전에 IE에서 반드시 .onload 처리기를 할당해야합니다. 그렇게하지 않으면 onload 이벤트가 onload 처리기에 도착하기 전에 onload 이벤트가 발생하여 이벤트를 놓칠 수 있습니다. 이미지가 브라우저 캐시에있는 경우

// assign .onload before .src 
img.onload = function() {}; 
img.src = "xxx.jpg"; 

IE의 특정 문제가 발생합니다 (따라서 .src가 할당 될 때 그들은 즉시로드)와 온로드 핸들러는 실행되지 않을 것입니다.

따라서 jsFiddle에서 .onload으로 할당 한 후 .src으로 할당을 이동하십시오.