이미지 용 자바 스크립트 프리 로더를 작성하는 방법

Question

jquery로 빌드 된 이미지 스왑 스크립트로 호버로 불투명도를 변경하는 썸네일 페이지가 있습니다. 그러나 라이브 웹 사이트에서 실행하면 속도가 느려지고 두 번째 이미지가로드 될 때까지 기다려야 호버 스왑이 즉시 발생하지 않습니다. 페이지가로드되는 동안 어떻게 엄지 이미지를 미리로드합니까? 사이트가 here

라이브입니다 여기에 HTML 여기

<div class="span-16 last" id="thumbs"> 
     <div class="span-4"> 
      <a href="waterfront.php"><img src="images/thumbs/thumb1.gif" id="thumb1"></a> 
     </div> 

    </div><!--THUMBS ENDS--> 

것은 JQuery와

$("#thumb1").hover(
     function(){ 
      $("#thumb1").attr("src","images/thumbs/thumb1A.gif"); 
      }, 

     function(){ 
      $("#thumb1").attr("src","images/thumbs/thumb1.gif"); 

     }); 

Answer 1

Here is an article to help you에게 있습니다.

DOM에 img 개의 요소가 생성됩니다.

나는 종종 new Image()을 만든 다음 이미지 위치에 src 속성을 설정하여이 작업을 수행했습니다. 로드 될 때 트리거되는 이벤트는 onload입니다.

그래서 간단한 예는

var preload = new Image(); 

preload.onload = function() { // I believe you need to define this before you set the src for IE 
    alert('loaded'); 
} 

preload.src = 'path/to/image.png'; 

Answer 2

알렉스 '대답

var images = ['a.jpg','b.jpg','c.jpg']; 
var preload = []; 
for(i in images) 
{ 
    preload[i] = new Image(); 
    preload[i].src = images[i]; 
} 

이것은 images 배열의 모든 이미지를 미리로드 구축하는 것입니다. 스크립트는 미리 미리로드 할 이미지를 미리 알고 있다고 가정합니다.

Answer 3

내가 투표 한 해결책에 대한 내 의견보기. 콜백이있는 실제 프리 로더를 추가하는 방법에 대한 자세한 내용은 다음을 참조하십시오. http://farinspace.com/jquery-image-preload-plugin/

이미지를 롤오버 용으로 미리로드하는 것이 중요하기 때문에 이미지가로드 될 때까지 메뉴를 표시하지 않을 수 있습니다. init에서 메뉴를 숨기고 onload 콜백에 표시 할 수 있습니다.