js 이미지 미리 로딩 example_기본 지식

JS 이미지 미리 로딩 간단한 예시

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

함수 loadImage( url, callback) {
if(url!='null') {
var img = new Image();
img.src = url;
if(img.complete) {
           콜백(img);
              else { ;
                                                                                                           > }
}

loadImage(pic_url,loadImage);



또 다른 자세한 내용 예

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

코드 복사

코드는 다음과 같습니다. < ;input type= "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')" />



실행해 보니 뭔가 이상한 일이 벌어지고 있는 걸 발견했습니다. 모든 브라우저는 일관성이 있으며 클릭당 하나의 이미지를 로드합니다. 그 이유는 무엇입니까?
IE와 Opera 실행 중에 onload 이벤트가 한 번만 발생하지 않는 것을 볼 수 있습니다!

이미지 개체의 일부 속성인 Complete, ReadyState(IE 독점 값 [초기화되지 않음, 완료])를 생각해 보세요. (캐싱이 효과에 영향을 주지 않도록 이미지 이름을 변경하세요!)

코드 복사

코드는 다음과 같습니다.

위의 테스트를 통해 몇 가지 차이점을 볼 수 있는데, 전체 속성에 대해 즉, IE는 이미지 여부를 기준으로 판단합니다. 즉, 로드된 이미지가 표시될 때

complete 속성의 값은 true입니다. 그렇지 않으면 이전에 이미지가 로드되었는지 여부와 관련이 없습니다. , 이전에 이미지가 로드되었는지 여부와는 아무런 관련이 없습니다.
그러나 다른 브라우저에서는 이미지가 이전에 로드되었고 브라우저에 캐시가 있는 한 다르게 동작합니다.
이는 IE의 ReadyState 속성 성능과 일치합니다.
이 시점에서 모든 브라우저가 이미지를 캐시하는지 확인할 수 있습니다! 그런데 위 문제의 원인은 정확히 무엇입니까?
우리 모두 알고 있듯이 캐시에서 로드하는 속도가 매우 빠르므로

에 코드를 복사하세요. 다음은 다음과 같습니다.

Img.src = isrc;

Img.onload = ...


IE와 Opera가 너무 빨리 로드되어 이벤트를 추가할 시간이 없나요?

이번에는 존재하지 않는 이미지를 로드하여 효과를 확인합니다.

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

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