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

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

아래 참조:

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

약간 수정:




코드 복사

코드 복사

이미지가 캐시되거나 로드되는지 여부의 관점에서 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와 같은 이벤트 추가에 영향을 미치는 것으로 나타났습니다. 이벤트가 표시된 후에 추가하면 실질적인 의미가 없습니다!
자바스크립트와 같은 해석적 언어의 특성상 이벤트를 추가할 때 이벤트를 발생시키는 핸들 앞에 이벤트를 추가해야 한다는 점에 주의해야 합니다.