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当前执行的代码。

请注意，这种效果可能会更平滑，但是整个过程会变慢，因为效果仅在图像完全加载后才开始。