1

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

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

提前致谢。

4

1 回答 1

1

您可以在 ajax 上添加图像success、隐藏它并附加一个onload 事件处理程序。加载后，您将执行当前在success.

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

于 2012-12-13T00:04:50.527 回答