當完成加載每個單獨的DIV與圖像時jQuery淡入？

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

，也可以使用直播（）結合動態IMG元件

Answer 2

負載與風格的IMG標籤=「顯示：無」和結合的圖像的負載（）事件，以消除它在文檔：http://api.jquery.com/load-event/

樣品：

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

Answer 3

冷杉，使用.load（）而不是AJAX，因爲它更容易使用

然後，如load（）函數，箱的回調d淡入（）來加載事件

$("#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/