jQuery 使用 Ajax 淡入和淡出图像答案

【问题标题】：jQuery Fade in and Fade out image with AjaxjQuery 使用 Ajax 淡入和淡出图像
【发布时间】：2012-11-30 19:25:29
【问题描述】：

我有一个简单的工作要做。我有一系列缩略图和一张主要图片。

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

提前致谢。

【问题讨论】：

另外，为什么不预加载图像？

标签： php jquery html

【解决方案1】：

您可以在 ajax success 上添加图像，将其隐藏并附加 onload event handler。加载后，您将执行当前在 success 上执行的代码。

请注意，这样效果可能会更流畅，但整体过程会更慢，因为效果仅在图像完全加载时才开始。

【讨论】：