javascript - jQuery fadeIn 何时用图像加载每个单独的 DIV？

Question

我有一个显示大量图片的网站。有没有办法在加载完成后淡入淡出，而不是显示它们并观看它加载？对 jQuery 和 javascript 的奇妙世界有点陌生。

现在我从调用 mySQL 服务器并获取最新图像的 PHP 文件中获取数据。它只是返回一大块 HTML 来显示:

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

  }
});
});

这是包含每个图像的一个 div 的样子:

<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>

当然，它淡入但用户看到它加载。

最好的方法是什么？

谢谢，
库尔顿

Answer 1

你可以使用 jquery image.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();
    });
  }
});

或者你可以使用 live() 绑定(bind)动态 img 元素