jQuery fadeIn when done loading each individual DIV with image?

I have a website that displays alot of pictures. Instead of showing them and watching it load, is there a way to fade it in after it's done loading? Kinda new to the wonderful world of jQuery and javascript.

Right now I get data from a PHP file which calls the mySQL server and gets the latest images. It just returns a big block of HTML to display:

// 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");

  }
});
});

Here's what ONE div looks like that contains each image:

<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开发者_Python百科_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>

Sure, it fades in but the user sees it load.

What would the best way to do this be?

Thanks,

Coulton

you can use jquery image .load() function to do that

$.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();
    });
  }
});

or you can use live() to bind dynamic img elements

Load the img tags with style='display:none' and bind the load() event of the image to fade it in. Documentation: http://api.jquery.com/load-event/

Sample:

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

Oh.. use the load()

You can execute a function when an image has completed loading (unhide the containing div).

Take a look at this example http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/

Firs, use .load() instead of ajax, as it is simpler to use

Then, as a callback of load() function, bind fadeIn() to the load event

$("#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");
               });
           }
  );
});