JavaScript 와 Image 로 딩 이벤트(onload),로 딩 상태(complete)
<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 과 같은 해석 적 언어의 특성 을 바탕 으로 사건 을 추가 할 때 이 사건 의 핸들 을 터치 하기 전에 사건 을 추가 하 는 것 에 주의해 야 합 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
4. 볼록 렌즈 효과 알고리즘내 가 보기에 볼록 렌즈 효과 의 본질은 일종 의 삽입 값 알고리즘 인 렌즈 중심의 물 체 는 일정한 확 대 를 얻 고 상응하는 가장자리 가 압축 되 며 가장자리 가 연속 되 어야 이미지 가 조 화 롭 고 자 연 스...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.