jQuery使用Ajax淡入和淡出圖像

Question

我正在嘗試做一份簡單的工作。 我有一系列縮略圖和主圖片。

http://activate5.info/index.php#portfolio

單擊縮略圖后，我需要執行ajax調用來查找數組，該數組將返回新的圖像和文本信息。 然后，我需要淡出主畫面，並用來自ajax調用的新信息替換它。

它正在工作，但是生澀。 發生的事情（我認為）是淡入淡出，但是淡入淡出是抖動的，因為圖像是頁面的新內容，並且以不穩定的方式顯示，就像通常在頁面上加載圖片時一樣。

我希望它平滑-因此，理想情況下，在圖像完全淡入之前，我需要某種警報/觸發器，然后再淡入圖像。我敢肯定這是一個簡單的答案-但我們將不勝感激。

我已經將淡出/淡入內容放入了ajax調用的“成功”部分中...

$.ajax({
 url: 'resources/portfolio/ajax_portfolio_data.php',
 data: { client: clientCode,
          slide: slideNumber
       },
 success: function(data) {
      $('#slide'+slideNumber+'_portfolio').fadeOut('slow',function(){
         $('#slide'+slideNumber+'_portfolio').html($.parseJSON(data));
         $('#slide'+slideNumber+'_portfolio').fadeIn('slow');
      }); 
  }
});

我真的不想預加載所有可用的圖像，因為那樣會使原本已經很大的頁面瀏覽速度進一步降低-任何人都有更好的方法來執行此操作？

PHP文件返回的（數據）示例如下：

$html = "<div class='slideMainImage'><img src='" 
   . $portfolio[$slide][$client]['image'] . "' /></div>";
$html .= "<p>" . $portfolio[$slide][$client]['text'] . "</p>";
echo json_encode($html);

提前致謝。

Answer 1

您可以在ajax success添加圖像，將其隱藏並附加onload事件處理程序 。 加載后，您將執行success當前執行的代碼。

請注意，這種效果可能會更平滑，但是整個過程會變慢，因為效果僅在圖像完全加載后才開始。