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

예를 들어보세요:

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

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

약간 수정:




코드 복사

코드는 다음과 같습니다.

function addImg(isrc)

{
var Img = new Image()
Img.onload = function()
{
document.body .appendChild(Img);
Img.src =
}
//-->


실행한 후 이상한 일이 발생했습니다. 모든 브라우저는 일관성이 있으며 클릭당 하나의 이미지를 로드합니다. 그 이유는 무엇입니까? IE와 Opera가 실행되는 동안 onload 이벤트가 한 번만 발생하는 것이 아니라는 것을 알 수 있습니다!

이미지 객체의 일부 속성인complete,readyState(IE 독점 값 [uninitialized,complete])를 생각해 보세요. (캐싱이 효과에 영향을 주지 않도록 이미지 이름을 변경하세요!)

코드 복사


코드는 다음과 같습니다.

위 테스트를 통해 몇 가지 차이점을 확인할 수 있습니다. 전체 속성에 대해 IE는 이미지가 표시되는지 여부를 판단합니다. Complete 속성은 true이고, 그렇지 않으면 항상 false입니다. 이는 이미지가 이전에 로드되었는지 여부와 관련이 없습니다. 즉, 캐싱과 관련이 없습니다. 그러나 다른 브라우저는 다르게 동작합니다. 이미지가 이전에 로드되었고 브라우저에 캐시가 있는 한 이는 IE의 ReadyState 속성 동작과 일치합니다.
이 시점에서 모든 브라우저가 이미지를 캐시하는지 확인할 수 있습니다! 그런데 위 문제의 원인은 정확히 무엇입니까?
우리 모두 알고 있듯이 캐시에서 로드하는 속도는 매우 빠르므로
...
Img.src = isrc
Img.onload = ...

...
진행 중에 IE와 Opera가 너무 빨리 로딩되어 이벤트를 추가할 시간이 없을 수도 있나요?

이번에는 전혀 존재하지 않는 사진을 로드하고 효과를 확인하세요.




코드 복사


코드는 다음과 같습니다:

var Imgttmt;

function addImg(isrc)

{
Imgttmt = new Image();
Imgttmt.src = isrc ;
alert ("complete : " Imgttmt.complete "nreadyState : " Imgttmt.readyState)
Imgttmt.onload = function ()
{
alert("impossible")
}
}
//-->

모든 브라우저가 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와 같은 이벤트 추가에 영향을 미치는 것으로 나타났습니다. 이벤트가 표시된 후에 추가하면 실질적인 의미가 없습니다! 자바스크립트와 같은 해석형 언어의 특성상 이벤트를 추가할 때 이벤트를 발생시키는 핸들 앞에 이벤트를 추가하는 것에 주의해야 합니다.