Internet Explorer에서 img.complete를 확인할 때 경쟁 조건이 있음

Question

이미지가로드되기 전후에 함수를 실행할 jQuery 플러그인을 작성했습니다. 본질적으로 이것이 큰 이미지를 표시 할 때 로딩 애니메이션을 표시 할 수 있습니다. (e.g.404를)로드하지 못했습니다 이미지

if (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) { 
    return; // 1 
} 
// 2 
if (!this.complete) { 
    options.preload(this); //3 

    $(this).load(function() { 
     options.loaded(this); //4 
    }); 
} 

1. 확인합니다. 이미지가
2. 그렇지 않은 경우 this.complete를로드되었는지
3. 점검, 프리로드 함수를 호출 (로딩 애니메이션 중지)

이를

이미지 load 이벤트에 대한 콜백을 추가 (로딩 애니메이션을 시작) Chrome과 Firefox에서 잘 작동합니다. 그러나 IE (9)에서는 preload 함수가 실행되는 경우가 있지만 loaded 함수가 아닌 것을 알게되었습니다.

나는 이것이 경쟁 조건 일 수 있다고 생각합니다.

이 문제를 해결하는 가장 좋은 방법은 무엇입니까? 사전로드 기능을 호출 한 후 다시 this.complete을 확인해야합니까?

감사

벤

그것은 load도 핸들러가 연결되어있는 경우에 따라

Answer 1

. 로드 이벤트 핸들러를 연결하기 전에 이미지가 이미로드 된 경우로드 이벤트가 발생하지 않습니다. 이러한 조건을 피하려면 load 이벤트 핸들러를 첨부 한 후 이미지의 src을 설정하십시오.

$("img").load(function(){ 

    //Image loaded 

}).attr("src", "imageSource"); 

Answer 2

당신은 3 가지 부울 조건 만 갖고 있기 때문에 카르노 맵을 사용하여 경쟁 조건을 제거 할 수 있습니다. K- 맵은 부울 표현을 단순화하고 경합 조건을 제거하는 것입니다 (예 : 정의되지 않은 전환이있는 경우).

1. 로드하지 못한 이미지 (예 : 404)를 확인하십시오. 이미지가 this.complete
2. 그렇지 않은 경우는, 프리로드 기능 (전화로드되었는지
3. 점검 트릭. 이것은 IE9과의 "문제"로 보인다 않은 SRC 설정 로딩 애니메이션