[英]Fadein() effect to a function: how to?
我有这个功能,适用于延迟加载。
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">
你不能淡化img
元素上的src更改。 为了实现这一点,你需要两个img
元素。 第二个将有一个src "original.jpg"
并且将具有更高的z-index
并以一个样式的display: none
开头。 然后你可以淡入它,它会在点上淡入。
编辑鉴于您的新问题,您可以执行以下操作:
onload
侦听器 onload
函数中,执行fadeIn
这就是我所做的。
添加了fadeOut(5000)
,原始src的img将在5 sec
后fadeOut(5000)
。 称为超时为6 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();
});
以下代码将淡出,更改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();
})
});
多谢你们。 我发现这个脚本工作(不知何故),图像有时会闪烁。 我不知道语义是否正确。
$(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);
})
});
以下代码将克隆具有data-src
属性的图像,然后隐藏克隆,更新克隆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);
// get position of original image
offset_left = original_img.offset().left;
offset_top = original_img.offset().top;
// get data-src of
data_src = original_img.attr('data-src');
// clone original image
original_img.clone()
.hide()
// put it directly in the body, so it can be positioned
.appendTo('body')
// set the new src
.attr('src', data_src)
// place it over the original image
.css({
"left": offset_left,
"top": offset_top,
"position": "absolute"
})
.fadeIn(function(){
original_img.attr('src', data_src);
$(this).remove();
});
})
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.