Question

我希望在ajax调用后加载图像后淡入图像这样，实际上发生淡入淡出而不是观看图像负载的用户。

是的，有人可以帮帮我吗？

这是JS片段：

success: function(data){
    $('.main-content').load(function() {
      $(data).hide().prependTo('.main-content').fadeIn('slow');
    });
    return false;
},

数据将来自php，回显如下：

<div class='left-col-box'>
  <div class='album_image'>
    <div class='image_settings'>
      <button class='delete_button' id='11'>Delete</button>
    </div>
    <img src='/includes/thumber.php?file=../img/$next_id.$ext&width=218&height=218' />
  </div>
</div>

如果上传了2张图片，则可以为2个已加载的盒子添加2个左栏字符串我希望在fadeIn之前加载图像。

Answer 1

 loader.show()  //show some loading image
 $('img',data).load(function(){
      loader.hide //hide loader once img is loaded
          $(data).prependTo('.main-content');
       }

Answer 2

如果data回调中的success是生成的HTML，则需要先将其附加，然后将其隐藏，然后将其淡入。

不确定$(data).hide()是否正常工作，因为此时data尚未在DOM中。

尝试以下操作（我认为您不需要加载）：

success: function(data){
    $(data).prependTo('.main-content').find('div.album_image img').hide().fadeIn('slow');
    return false;
},

DEMO - 使用上面的代码

加载图片并慢慢淡入

上面的DEMO使用了建议的代码并预先生成了生成的HTML，然后找到了图片标签，隐藏了它，然后慢慢淡入。

当然，如果您隐藏了img标签，例如使用display: none或类似标签，那么您应该只需要：

$(data).prependTo('.main-content').find('div.album_image img').fadeIn('slow');

从ajax调用加载后淡出图像

2 个答案: