从ajax调用加载后的图像褪色

我想在ajax调用后加载图像后淡入图像。
这种方式实际上发生淡入淡出，而不是用户观看图像加载。从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左COL-盒串为2个装载的箱子。
我想要在fadeIn之前加载图像。

来源

2013-01-12 user1952509

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

来源

2013-01-12 09:49:27

完美！这工作像一个魅力。谢谢！ – user1952509

我正要删除我的答案，我以为我的理解来自你的问题是错误的。:) –

事情是，如果我做.fadeIn（500），它只是定期加载。我甚至无法褪色。有没有办法解决这个问题？ – user1952509

如果success回调data是生成的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');

来源

2013-01-12 09:51:07 Nope

嗯。我喜欢你的代码的简单性。它确保图像将被加载吗？如果我有一个巨大的图像加载？ – user1952509

@ user1952509：只有在所有数据都准备好的情况下才能触发成功。如果您想知道隐藏和褪色图像的大小，可以更新小提琴，将占位符图像的宽度和高度更改为大量值。目前我正在使用手机，现在无法检查小提琴，对不起。 – Nope

Nvm。我找到了一个修复。谢谢你的帮助！ – user1952509

从ajax调用加载后的图像褪色

回答

相关问题