JavaScript 그림 미리 불 러 오기 실현

웹 사 이 트 를 개발 할 때 항상 한 페이지 에서 대량의 그림 을 조회 해 야 한다. 만약 에 데 이 터 를 고려 하면 pconline 처럼 모든 페이지 에 한 장의 그림 만 표시 하여 사용자 가 한 장의 그림 을 볼 때마다 전체 페이지 를 다시 다운로드 해 야 한다.그러나 웹 2.0 시대 에 더 많은 사람들 이 자바 script 으로 그림 브 라 우 저 를 실현 하여 사용자 가 너무 오래 기다 리 지 않 아 도 다른 그림 을 볼 수 있 도록 하 기 를 원 했다.
그림 의 주 소 를 알 게 되 었 습 니 다. 고정 크기 의 html 용기 (div 등 일 수 있 습 니 다) 에 표시 해 야 합 니 다. 가장 중요 한 것 은 바로 이 그림 의 너비 와 높이 를 알 고 용기 의 너비 와 높이 를 결합 하여 일정한 크기 에 따라 그림 을 표시 해 야 합 니 다.따라서 이미지 프 리 로드 를 실현 하 는 것 은 이미지 브 라 우 저의 핵심 기능 이 된다.
그림 반전 효 과 를 본 친구 들 은 그림 이 바 뀔 때 기다 리 지 않도록 먼저 그림 을 로 컬 에 다운로드 하여 브 라 우 저 캐 시 를 하 는 것 이 좋다 는 것 을 잘 알 고 있다.이때 보통 js 에 있 는 Image 대상 을 사용 합 니 다.일반적인 수단 은 모두 이와 같다.

function preLoadImg(url) {
 var img = new Image();
 img.src = url;
}

        preLoadImg 함 수 를 호출 하여 그림 의 url 을 전송 하면 그림 을 미리 다운로드 할 수 있 습 니 다.실제로 여기에 사용 되 는 사전 다운로드 기능 도 이와 거의 일치한다.그림 을 미리 다운로드 한 후 img 의 width 와 height 속성 을 통 해 그림 의 너비 와 높이 를 알 수 있 습 니 다.그러나 그림 브 라 우 저 기능 을 할 때 그림 이 실시 간 으로 표시 되 는 것 을 고려 해 야 한다.예 를 들 어 표시 단 추 를 눌 렀 을 때 위 에 있 는 유사 한 코드 로 그림 을 불 러 옵 니 다.따라서 img. width 를 직접 사용 할 때 그림 이 완전히 다운로드 되 지 않 았 다.따라서 그림 다운로드 가 끝 날 때 까지 비동기 적 인 방법 으로 img 의 width 와 height 를 호출 해 야 합 니 다.
이러한 비동기 적 인 방법 을 실현 하 는 것 은 사실상 어렵 지 않다. 그림 의 다운로드 완료 사건 도 간단 하 다. 바로 간단 한 onload 사건 이다.따라서 우 리 는 아래 의 코드 를 쓸 수 있다.

function loadImage(url, callback) {
  var img = new Image();
   img.src = url;
   img.onload = function(){ //           callback  。
     callback.call(img);   //  callback  this     img。
   };
}

자, 테스트 용례 를 하나 더 쓰 시 오.

function imgLoaded(){
   alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>

        fireforx 에서 테스트 해 보 니 괜 찮 은 것 같 습 니 다. 과연 예상 한 효과 와 마찬가지 로 그림 을 다운로드 하면 그림 의 너비 가 팝 업 됩 니 다.몇 번 을 클릭 하 든 결 과 를 갱신 하 든 마찬가지다.
그러나 이 정도 까지 는 너무 일찍 기뻐 하지 마 세 요. 브 라 우 저의 호환성 도 고려 해 야 합 니 다. 그래서 빨리 ie 에 가서 테스트 해 보 세 요.맞 아, 똑 같이 그림 의 너비 가 나 왔 어.하지만 로드 를 다시 클릭 하면 상황 이 달라 져 아무런 반응 이 없다.새로 고침 도 마찬가지다.
여러 브 라 우 저 버 전에 대한 테스트 를 통 해 ie6, opera 는 모두 이 렇 고 fireforx 와 safari 는 정상 적 인 것 으로 나 타 났 다.사실 원인 도 간단 하 다. 브 라 우 저의 캐 시 때문이다.그림 을 한 번 불 러 온 후에 이 그림 에 대한 요청 이 있 으 면 브 라 우 저가 이 그림 을 캐 시 했 기 때문에 새로운 요청 을 하지 않 고 캐 시 에서 직접 불 러 옵 니 다.fireforx 와 safari 에 대해 서 는 이 두 가지 로 딩 방식 을 사용자 에 게 투명 하 게 합 니 다. 마찬가지 로 그림 의 onload 사건 을 일 으 킬 수 있 습 니 다. ie 와 opera 는 이러한 동일성 을 무시 하고 그림 의 onload 사건 을 일 으 키 지 않 기 때문에 위의 코드 는 그들 안에 서 는 효 과 를 얻 을 수 없습니다.
어 떡 하지?가장 좋 은 경 우 는 Image 가 불 러 오 는 데 성 공 했 는 지 상태 값 을 표시 할 수 있 습 니 다.캐 시 에서 불 러 올 때 기다 릴 필요 가 없 기 때문에 이 상태 값 은 다운로드 되 었 음 을 나타 내 는 것 이 고 http 에서 불 러 오 기 를 요청 할 때 다운 로드 를 기 다 려 야 하기 때문에 이 값 은 완료 되 지 않 은 것 으로 표 시 됩 니 다.이렇게 하면 해결 할 수 있 습 니 다.
일부 분석 을 통 해 각 브 라 우 저 에 호 환 되 는 Image 의 속성 인 complete 를 발견 하 였 습 니 다.따라서 그림 onload 사건 전에 이 값 을 판단 하면 됩 니 다.마지막 으로 코드 는 다음 과 같 습 니 다.

function loadImage(url, callback) {
    var img = new Image(); //    Image  ，        
     img.src = url;
  
    if (img.complete) { //               ，        
         callback.call(img);
        return; //     ，     onload  
     }
     img.onload = function () { //           callback  。
         callback.call(img);//      this   Image  
     };
};

        이런 고생 을 통 해 각 브 라 우 저 들 이 우리 의 목 표를 만족 시 킬 수 있 게 되 었 다.코드 는 간단 하지만 이미지 브 라 우 저 에서 가장 핵심 적 인 문 제 를 해결 해 버 렸 습 니 다. 그 다음 에 해 야 할 일 은 그림 이 어떻게 나타 나 는 지 에 대한 문제 일 뿐 입 니 다.