0

我想在 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 个 left-col-box 字符串。
我希望在fadeIn.

4

2 回答 2

0 
 loader.show()  //show some loading image
 $('img',data).load(function(){
      loader.hide //hide loader once img is loaded
          $(data).prependTo('.main-content');
       }
于 2013-01-12T09:49:27.543 回答
0

如果回调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预先生成隐藏标签，例如使用 adisplay: none或类似标签，那么您只需要：

$(data).prependTo('.main-content').find('div.album_image img').fadeIn('slow');
于 2013-01-12T09:51:07.173 回答