자바스크립트 및 이미지 로딩 이벤트(onload), 로딩상태(완료)_javascript 스킬

어제 저는 jQuery 플러그인 aeImageResize를 사용했는데 더 많은 이점이 있다는 것을 발견했습니다. 각 이미지가 로드된 후 즉시 크기가 조정됩니다.
이미지 객체 Image의 onload 이벤트 때문입니다.
플러그인의 소스 코드를 살펴보면 이 플러그인도 이미지 객체의 완전한 속성과 onload 이벤트에 의존하고 있으며, 특히 이미지에서 IE6과 다른 브라우저의 차이점은 무엇인지 알아냈습니다. 개체를 로드 중이신가요?

아래 참조:

js를 통해 DOM을 조작하는 것은 종종 현재 페이지의 html 요소를 비동기적으로 로드하는 데 사용됩니다. Image 개체에 대한 몇 가지 이해에 대해 이야기하겠습니다.
예제 보기:

코드 복사 코드는 다음과 같습니다.

< ;input type= "button" name="" value="이미지 로드" onclick="addImg('tt.jpg')" />
위의 코드가 포함되어 있습니다. "tt.jpg"는 열 때 로드되지 않지만 버튼을 클릭하면 로드됩니다. 로딩이 완료되면 onload 이벤트가 트리거되어 페이지에 표시됩니다. "tt.jpg" 이미지를 처음 로드하시면 정상적으로 실행됩니다. 버튼을 클릭하면 이미지가 로드되어 표시됩니다. 반복해서 클릭하면 어떻게 되나요?
IE와 Opera에서는 처음 이미지를 로딩할 때를 제외하고는 정상적으로 표시되다가 다시 클릭하면 반응이 없고, 새로고침도 마찬가지입니다. "onload" 이벤트를 한 번만 실행합니까? 캐싱 메커니즘인가요?
FF와 Chrom에서는 클릭할 때마다 하나의 이미지가 로드됩니다.

약간 수정:




코드 복사

코드는 다음과 같습니다. < 입력 유형= "button" name="" value="이미지 로드" onclick="addImg('tt.jpg')" />


뭔가 이상한 걸 발견했어요 뭔가 일어났어요.
모든 브라우저는 일관되며 클릭당 하나의 이미지를 로드합니다. 그 이유는 무엇입니까? IE와 Opera가 실행되는 동안 onload 이벤트가 한 번만 발생하는 것이 아니라는 것을 알 수 있습니다!
이미지 개체의 일부 속성인 Complete, ReadyState(IE 독점 값 [초기화되지 않음, 완료])를 생각해 보세요. (캐싱이 효과에 영향을 주지 않도록 이미지 이름을 변경하세요!)

코드 복사

코드는 다음과 같습니다.


모든 브라우저에서 onload 이벤트가 발생하지 않는 것은 확실합니다.

이미지가 캐시되거나 로드되는지 여부의 관점에서 IE와 Opera는 정상적으로 작동하며, 완료는 항상 false입니다. IE의 ReadyState는 항상 초기화되지 않습니다.
Imgttmt.complete의 값이 항상 true인 FF는 혼란스럽습니다.
더 혼란스러운 것은 Chrom입니다. Chrom에서는 처음에 new Imgttmt()가 호출될 때 Imgttmt.complete가 false입니다. 그 후에는 Imgttmt.complete의 값이 항상 true입니다!
한 번도 로드되지 않은 이미지로 변경하면 FF와 Chrom의 동작은 동일합니다. 처음 로드할 때 Imgttmt.complete 값은 false이고 그 다음에는 true입니다!
또한 테스트 과정에서 스크립트의 실행 순서가 실제로 onload와 같은 이벤트 추가에 영향을 미치는 것으로 나타났습니다. 이벤트가 표시된 후에 추가하면 실질적인 의미가 없습니다!
자바스크립트와 같은 해석적 언어의 특성상 이벤트를 추가할 때 이벤트를 발생시키는 핸들 앞에 이벤트를 추가해야 한다는 점에 주의해야 합니다.