jQuery 페이드 인 이미지 변경 후로드시 페이드 아웃

Question

나는 간단한 이미지 슬라이더를 가지고 있습니다. 작은 이미지 목록이 있는데 그 중 하나를 클릭 할 때마다 대상 큰 이미지의 원본을 클릭 한 것으로 대체합니다 (서버에서 더 큰 이미지를 얻으려면 src로 일부 조작).

는 지금은 큰 이미지를 페이드 아웃 작은 이미지를 클릭에서 원하는, 새로운 이미지가로드 될 때 그것을 페이드

이 코드로 시도 :.이와

ul.find('img').click(function() { 
    $('#big_image') 
     .fadeOut() 
     .attr('src', this.src.replace('/small/', '/big/')) // Some other src 
     .load(function() { 
      $(this).fadeIn(); 
     }); 
}); 

문제가있는 경우 브라우저에 그 이미지를 캐시하고 onclick 이미지가 즉시로드 된 다음 페이드 인 및 아웃되어 약간 짜증이납니다.

이 :

ul.find('img').click(function() { 
    $('#big_image') 
     .load(function() { 
      $(this).fadeIn(); 
     }) 
     .attr('src', this.src.replace('/small/', '/big/')) 
     .load(function() { 
      $(this).fadeIn(); 
     }); 
}); 

는 전혀 퇴색하지 않습니다.

아이디어가 있으십니까?

Answer 1

내가이 jQuery 플러그인을 사용하여 이런 일을했을 때 :

http://flesler.blogspot.com/2008/01/jquerypreload.html

자동 큰 이미지를로드하고있는 작은 하나를 대체 할 수 있습니다. 라이브러리는 자동으로 페이드되지 않고 그냥 바꾸기 만하지만 큰 이미지가 로딩되면 이벤트를 트리거하는 핸들을 제공합니다.

Answer 2

는

ul.find('img').click(function() { 
    $('#big_image').fadeOut(500, function() { 
     $(this).attr('src', this.src.replace('/small/', '/big/')) 
      .load(function() { 
       $(this).fadeIn(); 
      }); 
    }); 
}); 

으로 고정