JavaScript 와 Image 로 딩 이벤트(onload),로 딩 상태(complete)

어제 jQuery 플러그 인 aeImageResize 를 사용 하여 더욱 유리 하 다 는 것 을 알 게 되 었 습 니 다.모든 그림 을 불 러 온 후 바로 같은 크기 로 조정 합 니 다.이것 은 그림 대상 Image 의 로 딩 이벤트 onload 의 공로 입 니 다.플러그 인의 원본 코드 를 보면 그림 대상 의 complete 속성 과 onload 이벤트 에 의존 하 는 것 을 발견 할 수 있 습 니 다.특히 IE6 를 구분 하여 취급 합 니 다.도대체 IE6 는 그림 로드 대상 에서 다른 브 라 우 저 와 어떤 차이 가 있 습 니까?다음 글 을 보 세 요:js 를 통 해 DOM 을 조작 하 는 경우 가 많 습 니 다.현재 페이지 html 요소 와 의 비동기 불 러 오기 위해 서 입 니 다.저 는 Image 대상 에 대한 인식 을 이야기 하 겠 습 니 다.예 를 들 어

 
<input type="button" name="" value="    " onclick="addImg('tt.jpg')" /> 
<script type="text/javascript"> 
<!-- 
function addImg(isrc) 
{ 
var Img = new Image(); 
Img.src = isrc; 
Img.onload = function () 
{ 
document.body.appendChild(Img); 
} 
} 
//--> 
</script> 

상기 코드 를 포함 하 는 페이지 가 열 렸 을 때'tt.jpg'를 불 러 오지 않 고 단 추 를 눌 렀 을 때 불 러 옵 니 다.불 러 오기 가 완료 되면 onload 이벤트 가 페이지 에 표 시 됩 니 다.'tt.jpg'라 는 그림 을 처음 불 러 오 면 정상적으로 실 행 됩 니 다.단 추 를 누 르 면 그림 을 불 러 오고 표시 합 니 다.반복 클릭 하면 어떻게 될까요?IE,Opera 에 서 는 처음 그림 을 불 러 올 때 정상 으로 나타 나 는 것 을 제외 하고 그 다음 에 클릭 하면 반응 이 없고 새로 고침 도 마찬가지 입 니 다.'onload'이벤트 만 촉발 하 는 건 가요?캐 시 메커니즘 입 니까?FF,Chrom 에서 클릭 할 때마다 이 그림 을 불 러 옵 니 다.약간 수정:

 
<input type="button" name="" value="    " onclick="addImg('tt.jpg')" /> 
<script type="text/javascript"> 
<!-- 
function addImg(isrc) 
{ 
var Img = new Image(); 
Img.onload = function () 
{ 
document.body.appendChild(Img); 
} 
Img.src = isrc; 
} 
//--> 
</script> 

실행 한 결과 이상 한 일이 발생 했 습 니 다.모든 브 라 우 저 는 일치 합 니 다.클릭 할 때마다 그림 을 불 러 옵 니 다.이것 은 또 무슨 원인 입 니까?IE,Opera 실행 과정 에서 onload 이벤트 가 한 번 만 발생 하 는 것 이 아 닙 니 다!Image 대상 의 일부 속성 을 연상 해 보 세 요.complete,ready State(IE 전속 값[uninitialized,complete])(캐 시 영향 을 방지 하기 위해 그림 이름 을 바 꾸 십시오!)

 
<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"
readyState : "+Img.readyState)' /> 
<input type="button" name="" value="    " onclick="addImg('mtm.jpg')" /> 
<script type="text/javascript"> 
<!-- 
var Img; 
function addImg(isrc) 
{ 
Img = new Image(); 
//Img.src = isrc; 
Img.onload = function () 
{ 
alert("complete : "+Img.complete +"
readyState : "+Img.readyState) 
document.body.appendChild(Img); 
} 
Img.src = isrc; 
} 
//--> 
</script> 

상기 테스트 를 통 해 차이 점 을 알 수 있 습 니 다.complete 속성 에 있어 IE 는 그림 이 표시 되 는 지 여부 에 따라 판단 합 니 다.즉,불 러 온 그림 이 표 시 된 후에 complete 속성의 값 이 true 입 니 다.그렇지 않 으 면 false 입 니 다.예전 에 이 그림 을 불 러 온 적 이 있 는 지 없 는 지,즉 캐 시 와 관계 가 없습니다!그러나 다른 브 라 우 저 들 은 확실히 다 릅 니 다.이전에 이 그림 을 불 러 온 적 이 있 으 면 브 라 우 저 에 캐 시 가 있 으 면 complete 는 true 입 니 다.이것 은 IE 의 ready State 속성 과 일치 합 니 다!이로써 모든 브 라 우 저가 그림 을 캐 시 할 것 이 확실 합 니 다!그런데 위의 문 제 는 도대체 어떤 원인 으로 인 한 것 일 까?캐 시 에서 물건 을 불 러 오 는 속도 가 빠르다 는 것 은 잘 알려 져 있다.이번 에는 존재 하지 않 는 그림 을 불 러 옵 니 다.효 과 를 보십시오

 
... 
Img.src = isrc; 
Img.onload = ... 
... 

모든 브 라 우 저가 onload 이 벤트 를 실행 하지 않 는 다 는 것 을 확신 할 수 있 습 니 다.캐 시 나 그림 을 불 러 왔 는 지 여부 의 측면 에서 볼 때 IE,Opera 는 정상 적 이 고 complete 는 항상 false 입 니 다.IE 의 ready State 는 처음부터 끝까지 uninitialized 입 니 다.의 심 스 러 운 것 은 FF 입 니 다.그 중에서 Imgttmt.complete 의 값 은 항상 true 입 니 다.더 당 혹 스 러 운 것 은 크롬 이다.이것 은 처음에 new Imgttmt()일 때 Imgttmt.complete 값 이 false 였 다.그 후에 Imgttmt.complete 값 은 항상 true 입 니 다!불 러 오지 않 은 그림 을 바 꾸 면 FF 와 Chrom 의 행동 이 일치 합 니 다.처음 불 러 올 때 Imgttmt.complete 값 은 false 이 고 그 다음 에는 true 입 니 다!테스트 과정 에서 스 크 립 트 의 실행 순서 가 onload 와 같은 이벤트 의 추가 에 영향 을 미 치 는 것 도 발견 되 었 습 니 다.표시 후 추가 이벤트 가 있 으 면 실제 적 인 의미 가 없습니다!javascript 과 같은 해석 적 언어의 특성 을 바탕 으로 사건 을 추가 할 때 이 사건 의 핸들 을 터치 하기 전에 사건 을 추가 하 는 것 에 주의해 야 합 니 다.