2013-01-12 16 views
0

ajax 호출 후 이미지가로드 된 후 이미지가 희미 해지기를 원합니다.
이렇게하면 사용자가 이미지로드를 보는 대신 실제로 페이드가 발생합니다.ajax 호출에서로드 후 이미지가 흐려짐

누군가 나를 도와 줄 수 있습니까?

success: function(data){ 
    $('.main-content').load(function() { 
     $(data).hide().prependTo('.main-content').fadeIn('slow'); 
    }); 
    return false; 
}, 

데이터 이런 식으로 뭔가를 반향 PHP에서 올 것이다 : 2 개 이미지가 업로드 된 경우

<div class='left-col-box'> 
    <div class='album_image'> 
    <div class='image_settings'> 
     <button class='delete_button' id='11'>Delete</button> 
    </div> 
    <img src='/includes/thumber.php?file=../img/$next_id.$ext&width=218&height=218' /> 
    </div> 
</div> 

, 2 왼쪽-COL-상자 문자열이있을 수

다음은 JS 조각입니다 로드 된 상자 2 개.
fadeIn 전에 이미지를로드하고 싶습니다.

답변

0
loader.show() //show some loading image 
$('img',data).load(function(){ 
     loader.hide //hide loader once img is loaded 
      $(data).prependTo('.main-content'); 
     } 
+0

완벽하게! 이것은 매력처럼 작동했습니다. 고맙습니다! – user1952509

+0

내가 내 대답을 삭제하려고 할 때, 나는 당신이 질문 한 것이 틀렸다고 생각했다. :) –

+0

.fadeIn (500)을했다면 규칙적으로로드됩니다. 나는 심지어 fade를 잡을 수 없다. 그 문제를 해결할 수있는 방법이 있습니까? – user1952509

0

success 콜백에서 data 당신이 그것을 페이드보다 먼저 첨부를 숨길 필요가 생성 된 HTML.

인 경우 그 시점으로 예상대로되지 data$(data).hide() 작품 확실하다 DOM에 아직 없습니다.

다음을 시도 (난 당신이 부하를 필요가 있다고 생각하지 않습니다) :

success: function(data){ 
    $(data).prependTo('.main-content').find('div.album_image img').hide().fadeIn('slow'); 
    return false; 
}, 

DEMO - 로딩 이미지 천천히 위의 코드를 사용하여, 그것을 페이딩


위의 그 DEMO는 제안 된 코드를 사용하고 생성 된 HTML을 앞에 추가 한 다음 이미지 태그를 찾아서 숨긴 다음 천천히 페이드 인합니다.

당신이 생성 오프 물론 경우 img 태그 display: none로, 예를 들어, 숨겨진 선행 또는 유사한 그때 당신이 필요합니다 모든은 다음과 같습니다

$(data).prependTo('.main-content').find('div.album_image img').fadeIn('slow'); 
+0

흠. 나는 코드의 단순함을 좋아한다. 그래도 이미지가로드 될 것이라고 보장합니까? 로드 할 거대한 이미지가 있다면 어떨까요? – user1952509

+0

@ user1952509 : 모든 데이터가 준비된 경우에만 성공해야합니다. 숨기기 및 페이드를위한 이미지의 크기에 대해 궁금한 점이 있으면 자리 표시 자 이미지의 너비와 높이를 엄청나게 큰 값으로 변경하는 바이올린을 업데이트 할 수 있습니다. 나는 지금 내 전화를 들고있어. 지금 당장은 수수께끼를 확인할 수 없다. 미안. – Nope

+0

Nvm. 나는 고침을 발견했다. 당신의 도움을 주셔서 감사합니다! – user1952509

관련 문제