js는 이미지 사전 로드를 구현합니다(js는 Image 객체 속성 완료를 작동하고 이벤트 온로드는 이미지를 비동기적으로 로드합니다)_javascript 기술

예를 들어보세요:

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

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

약간 수정:




코드 복사

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