jquery 를 사용 하여 그림 사전 로드 를 실현 하여 페이지 로드 속도 와 사용자 체 를 향상 시 킵 니 다.

우 리 는 사 이 트 를 만 들 때 자주 이런 문 제 를 만 날 수 있다.한 페이지 에 대량의 그림 이 있어 서 페이지 의 로드 속도 가 느 리 고 백 페이지 사용자 의 체험 이 좋 지 않다.그렇다면 이 문 제 를 어떻게 해결 할 것 인가?우선 서버 성능 을 향상 시 키 고 정적 캐 시 등 수단 으로 그림 의 로드 속 도 를 빠르게 하 는 것 이 좋 은 방법 이 라 고 생각 할 수 있 습 니 다.하지만 가끔 은 프런트 에서 해결 방법 을 찾 을 수 있 습 니 다.실제 응용 에서 자주 사용 되 는 js 프 리 로드 방법 을 소개 하 겠 습 니 다.
  우선 그림 을 출력 할 때 저희 가 처 리 를 해 보도 록 하 겠 습 니 다.

<imgdata="               "src="             ，         。                           "alt="   "/>

   html     js ，       jquery   

$('img[data]').load(function(){
   var __this__ = $(this);
   var url = __this__.attr('data');
   var src = __this__.attr('src');
   if(url ==''|| url == src)//                        
   {
        return;
   }
    var img =newImage();//          
    img.src = url;//           
     if(img.complete)//                    
     {
        __this__.attr('src',url);//           
        return;
     }
     img.onload =function(){//              
        __this__.attr('src',url);
      }
});

 자,페이지 로 딩 속도 가 빠 른 지 빨리 확인 해 보 세 요.더 많은 재 미 있 는 내용 을 지 켜 봐 주세요.