jQuery fadeIn이 완료되면 각 개별 DIV에 이미지가로드됩니까?

Question

많은 사진을 표시하는 웹 사이트가 있습니다. 그것들을 보여주고로드하는 것을 보는 대신,로드가 끝나면 페이드 아웃하는 방법이 있습니까? jQuery와 javascript의 멋진 세상에 처음으로 등장했습니다.

지금은 mySQL 서버를 호출하고 최신 이미지를 가져 오는 PHP 파일에서 데이터를 가져옵니다.

// If the user clicks the logo 
$("#logo").click(function() { 
$("#right_bar_wrapper").animate({ height: 'toggle', opacity: 'toggle' }, '200'); 
var thePostData = "username=c"; 
$.ajax({ 
    type: "POST", 
    url: "http://myflashpics.com/v2/process_newsfeed.php", 
    data: thePostData, 
    success: function(theRetrievedData) { 
    document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData; 
    $("#right_bar_wrapper").fadeIn("200"); 

    } 
}); 
}); 

다음은 그 각각의 이미지가 들어있는 것처럼 ONE 사업부 보이는 내용은 다음과 같습니다 : 그것은 단지 HTML의 큰 블록을 표시하기 위해 반환

는

<div class='sidebar_image_box_newsfeed'> 
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_coultonvento'><img src='http://myflashpics.com/get_image.php?short_string=kmdp&size=thumbnail' />TheAmazingCoultoniusTheFourneeth...</div> 
<img src='http://myflashpics.com/get_image.php?short_string=6v9o&size=big' id='image_6v9o' class='makePictureBig' style='width: 180px;' /> 
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_6v9o'>9</div> 
<div class='sidebar_image_box_newsfeed_caption'>Usama bin laden? I believe that's a typo, Fox. </div> 
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_6v9o'>9</div> 
<div style='clear: both;'></div> 
</div><div class='sidebar_image_box_newsfeed'> 
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_BrandonVento'><img src='http://myflashpics.com/get_image.php?short_string=e4r7&size=thumbnail' />Brandon Vento</div> 
<img src='http://myflashpics.com/get_image.php?short_string=o1sk&size=big' id='image_o1sk' class='makePictureBig' style='width: 180px;' /> 
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_o1sk'>9</div> 
<div class='sidebar_image_box_newsfeed_caption'></div> 
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_o1sk'>9</div> 
<div style='clear: both;'></div> 
</div> 

물론, 그것은 페이드하지만 사용자가로드 본다.

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

감사합니다,
Coulton

Answer 1

로드 이벤트 D fadeIn()에 결합하는 동적 IMG 요소

Answer 2

로드 스타일로 IMG 태그 = '표시 : 없음'과 결합 문서에 그것을 페이드 이미지의 부하() 이벤트 :. http://api.jquery.com/load-event/

샘플 :

대신 AJAX의

$(".makePictureBig").live('load', function(){ 
    $(this).fadeIn(); 
}); 

Answer 3

퍼스를 사용 .load()는 부하() 함수, 빈의 콜백과 같이, 그런

를 사용하여 간단로서 만약

$.ajax({ 
    type: "POST", 
    url: "http://myflashpics.com/v2/process_newsfeed.php", 
    data: thePostData, 
    success: function(theRetrievedData) { 
    document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData; 
    $("#right_bar_wrapper").fadeIn("200"); 
    //here do some trick 
    $("#right_bar_wrapper img").load(function(){ 
     $(this).fadeIn(); 
    }); 
    } 
}); 

또는 라이브 사용할 수 있도록 할 JQuery와 화상 .load() 함수를 사용할 수

$("#logo").click(function() { 
    $("#right_bar_wrapper") 
    .animate({ height: 'toggle', opacity: 'toggle' }, '200') 
    .load("http://myflashpics.com/v2/process_newsfeed.php", 
      {"username" : "c"}, 
      function() { 
       $(this).bind('load',function(){ 
        $(this).fadeIn("200"); 
       }); 
      } 
); 
}); 

Answer 4

오 ..로드 사용()

이미지로드가 완료되면 함수를 실행할 수 있습니다 (포함 된 div 숨기기).

당신이 그것을로드보고 무엇을 의미합니까 예 http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/