javascript - Fadein() 对函数的效果 : how to?

Question

我有这个函数，非常适合延迟加载。

panel.find('img[data-src]').each(function(){
            element = $(this);
            element.attr('src', element.data('src'));
            element.removeAttr('data-src');

如何为该removeAttr函数提供fadeIn()效果？
我尝试过:

element.removeAttr('data-src').fadeIn();

但它不起作用。 img 代码如下所示，我只是希望 dot.png 淡出，而 origin.jpg 淡入。

<img src="dot.png" data-src="original.jpg">

http://jsfiddle.net/7s1yb1un/6/
提前致谢

Answer 1

您无法淡出 img 元素上的 src 更改。要实现此目的，您需要两个 img 元素。第二个将具有 src "original.jpg" 并将具有更高的 z-index 并以 display: none 开头风格。然后你可以淡入它，它会在点上淡入。

编辑鉴于您的新问题，您可以执行以下操作:

1. 为图像添加一个onload监听器
2. 在更改“src”之前，淡出图像
3. 然后将“src”更改为“original.jpg”
4. 在您的 onload 函数中，执行 fadeIn