jQuery - 淡入淡出 - 生涩淡入淡出答案

【问题标题】：Jquery - fadeIn - jerky fadeinjQuery - 淡入淡出 - 生涩淡入淡出
【发布时间】：2010-12-20 21:37:03
【问题描述】：

我制作了一个简单的图像切换器，可以淡入淡出不同的徽标。 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);
});

提前致谢。

【问题讨论】：

标签： jquery queue fadein

【解决方案1】：

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

如果图像都是本地的（因此加载速度非常快），是否会发生这种情况？
你试过preloading the images吗？
如果预加载有效，您认为将它们全部放入精灵中会怎样？只需发出一个 http 请求。

【讨论】：

感谢您的链接！我确实有一个预加载功能，但我错过了从那个 tut 存储到缓存部分，所以我认为它必须在加载之前就被覆盖，但这似乎已经修复了它。还将研究您在下面建议的其他选项。谢谢。

【解决方案2】：

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

类似的东西。

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

【讨论】：

【解决方案3】：

另一种解决方法：不改变图片的来源，用jQuery的.load()或者.get()来代替怎么样？然后你可以使用一个回调函数，它只在加载完成后触发，将其淡入。

【讨论】：

【解决方案4】：

为 img 标签指定宽度和高度。

【讨论】：