我有一个包含图像网址的数组,我将其添加到页面img
标记。我将它们隐藏起来并在加载时淡入它们。这是有效的,但我想在它们之间添加一点延迟,所以它不会同时消失。
function ajaxCallback(data)
{
if(data && data.images)
for(var n in data.images)
{
var image = $('<img>')
.prop(data.images[n])
.css({opacity: 0})
.appendTo('#output')
.load(imageLoaded);
}
}
function imageLoaded()
{
$(this)
.animate({opacity: 1});
}
目前,如果它们加载速度足够快,它们将基本上全部淡入。我想在每个之间有点延迟。尝试添加对delay
的调用,但这似乎没有做太多。我想我可能不得不对队列或某事做些什么,但却无法完成如何做到这一点。
最好的方法是什么?
答案 0 :(得分:1)
在类似的情况下(与图像无关),我使用递归函数来提取数组的第一个元素,完成它的工作,并在完成时调用自身。在您的情况下,您应该在animate()
的回调中再次调用该函数。
答案 1 :(得分:0)
您可以在setTimeout
方法中使用imageLoaded()
,并为计时器提供随机值(在某些范围内)。
function imageLoaded()
{
var self = $(this);
setTimeout(function(){
self.animate({opacity: 1});
},
Math.random()*2000 //will fire sometime between 0 to 2000 milliseconds
);
}
答案 2 :(得分:0)
这是一种方式:
for (var n in data.images) {
$('<img>').prop('src', data.images[n]).css({ // don't forget "src"
opacity: 0
})
.appendTo('#output')
.bind('reveal', imageLoaded); // bind a custom event
}
function imageLoaded() {
$(this).animate({
opacity: 1
}, function(){ // wait until animation is done via callback
$(this).next().trigger('reveal'); // then trigger the next reveal
});
}
$('#output').find('img:first').load(function() { // when first image is loaded
$(this).trigger('reveal'); // trigger its event to start the cascade
});