Question

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

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

点击缩略图后，我需要进行ajax调用以查找数组，该数组会返回新的图像和文本信息。然后我需要淡出主画面，并用来自ajax调用的新信息替换它。

它有效，但它生涩。发生了什么（我认为）是淡出是平滑的，但是由于图像是页面的新内容而导致IN抖动，并且它以一种生涩的方式显示，就像图片正常加载到页面上一样。

我希望它顺利 - 所以理想情况下，我需要某种警报/触发器，当图像完全加载时，在我淡入图像之前。我确信这是一个简单的答案 - 但是会很感激帮助。

我把fadeout / fadein的东西放在ajax调用的'success'部分......

$.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 event handler。加载后，执行当前在success上执行的代码。

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

jQuery使用Ajax淡入淡出图像

1 个答案: