我有这个函数,可以很好地工作于延迟加载。
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转换为fadeOut,并将original.jpg淡入。
<img src="dot.png" data-src="original.jpg">
http://jsfiddle.net/7s1yb1un/6/
提前感谢
发布于 2016-11-14 23:58:49
这就是我所做的。
增加了一个fadeOut(5000)
,原始资源的img会在5 sec
之后淡出。调用了一个超时为6sec
的函数,在5秒内用data-src
和fadeIn(5000)
改变了src
,我希望这能解决你的问题。
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();
});
发布于 2016-11-22 00:53:14
下面的代码将淡出,更改src,然后淡入。
HTML
<div id="fullpage">
<div class="section">
<img class="fadeable" src="http://1.gravatar.com/avatar/767fc9c115a1b989744c755db47feb60?size=800" data-src="http://2.gravatar.com/userimage/5/ff5263e8c30557b57e64423ee8496e41?size=800" width=100 height=100 alt="smile"></div>
</div>
JS
$(function() {
$('img[data-src]').each(function(i, e) {
// cache element
original_img = $(e);
original_img
.fadeOut(function(){
original_img.attr('src', original_img.attr('data-src'))
})
.fadeIn();
})
});
发布于 2016-11-15 00:47:22
谢谢你们。我发现这个脚本(不知何故)起作用了,图像有时就会闪烁。我不知道语义上是否正确。
$(function() {
$('img').one("load", function() {
var e = $(this);
e.data('src', e.attr('data-src'));
e.animate({"opacity": 0}, 400);
e.data('src');
e.animate({"opacity": 1}, 400);
})
});
https://stackoverflow.com/questions/40592167
复制相似问题