Jquery - fadeIn - jerky fadein

Question

我制作了一个简单的图像切换器，可以逐渐显示不同的徽标。 http://bit.ly/ewrSgp上的示例和完整源代码。我淡出图像，然后排队src属性更改，然后淡入。它似乎平稳地工作了一段时间但是在20秒左右之后它开始淡化图像，然后更改src，然后立即改变，看起来丑陋。我这样做了吗？

运行更改的代码是：

// fadeout old image, change to new and fadeback in.
// Call function changeimage again.
$(imToChange).fadeOut(600).queue(function (n) {
    jQuery(this).attr('src', newimageSrc);
    n();
}).fadeIn(1000, function () {
    setTimeout(function () {
        //recall image change function
        changeImage(indexToChange);
    }, o.delay);
});

提前致谢。

Answer 1

我认为你需要等待图像完成加载。我尝试在可见区域外或其他图像后面显示图像，直到onload事件触发，然后将其移动并在适当的位置淡入。

像这样。

var img = $("<img href='newimage.png' />").load(function() { movit(); fadeit(); });
$("#ahiddenelement").append(img);

Answer 2

我看到一些闪烁，但不是很多。我注意到它发生在一个特定的标志上，我想我第一次看到它，但不是下一次，这让我觉得一旦加载，它就没事了。一些想法：

• 如果图像都是本地图像（因此加载速度很快）会发生这种情况吗？
• 您是否尝试过preloading the images？
• 如果预加载有效，您如何将它们全部放入精灵中？只有一个http请求。

Answer 3

另一种解决方案：如何使用jQuery的.load()或.get()替换它，而不是更改图像的来源？然后你可以使用一个回调函数，它只在加载完成后才会触发，然后将其淡入。

Answer 4

指定 img 标记的宽度和高度。