Fadein()效果到一个函数:怎么样？

Question

我有这个功能,适用于延迟加载.

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

如何fadeIn()对removeAttr函数产生影响？
我试过了:

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

但它不起作用.该img代码看起来是这样的,我只是想在dot.png到淡出和淡入的original.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

Answer 2

这就是我所做的.

添加了一个fadeOut(5000),原始src的img将在淡出之后5 sec.调用的超时功能6sec,它的变化src与data-src和fadeIn(5000)5秒内,我希望这能解决你的问题.

JS代码如下

var myVar;
function myFunction() {
    myVar = setTimeout(function(){ 
        var src = $("img.hide").attr("data-src");
        $("img.hide").attr("src",src);
        $("img.hide").fadeIn(5000); 
    }, 6000);
}

function myStopFunction() {
    clearTimeout(myVar);
}

$(document).ready(function() {
  $(".hide").fadeOut(5000);
  myFunction();  
});