javascript fadein/fadeout，在 firefox 顶部淡出 img flicks

Question

我正在制作这个网站 http://bit.ly/JV5I0Z和

我有一个淡入效果，第二张图片 (newBg) 位于第一张图片 (bgImg) 的顶部并淡入，然后我将 src 从第二张复制到第一张，所以现在它们都是一样的图像，然后将第二个的不透明度设置为 0，并在用户更改图像时重复。

这在 Opera 和 Chrome 上运行良好，但在 Firefox 上，淡入太慢了，淡出的 img(它并没有像我说的那样真正淡出，只是被覆盖)在动画结束时轻弹，出现然后消失。

我不确定是什么原因造成的，是什么导致了 Firefox 中淡入缓慢？

这是处理淡入淡出的代码:http://jsfiddle.net/VbjPc/1/

感谢任何帮助。

编辑------------

我已经更新了 jsfiddle http://jsfiddle.net/VbjPc/1/使用我用于预加载图像的代码。新代码在底部。我认为预加载是有效的，因为在图像加载之前什么都没有发生，你可以看出它们大约是 500kb，所以加载它们需要几秒钟。

Answer 1

在 Web 浏览器中首次加载图像时，浏览器下载图像时会出现一定程度的延迟。

一般来说，大多数网站都有很多事件部件。当浏览器下载 HTML 文档时，浏览器将开始处理 HTML 文档中由 HTML 元素表示的所有元素和事件。

例如，CSS 在遇到链接标签时开始加载。 JavaScript 正在加载脚本元素。其他 HTML 元素被添加到 DOM 中。发生这种情况时，将触发向服务器发送请求以下载这些资源的事件。

当 img 标签被添加到 DOM 时，一个请求被发送到服务器以检索由 src 属性标识的资源。图像完全下载后，将呈现在页面上。

假设我们正在使用适合网站大小的图像，当我们正常加载图像时，没有效果，我们不会真正注意到延迟，因为图像或多或少会在完成后立即显示下载。

但是，当我们添加淡入和淡出等效果时，延迟的影响变得非常明显。发生这种情况是因为 JavaScript 事件实际上开始修改 img 元素的 CSS 属性，即使实际资源尚未准备好。

因此，一旦将 DOM 元素添加到 DOM，就会触发 fadeIn 和 fadeOut 事件，而不是在图像加载完成时触发。换句话说，fadeIn 或 fadeOut 操作在图像仍在下载时发生。这会产生一种不和谐的效果，因为部分褪色但未渲染的图像可能会突然出现，然后在其余部分缓慢褪色。

这个 Action 不是我们想要的平滑、渐进的效果。

现在，您可能会注意到在您加载图像的第 2 次、第 3 次、第 4 次或第 n 次时不会发生这种情况。图像被浏览器缓存后，延迟大大减少，淡入/淡出效果如期出现。流畅而渐进。

我在淡入图像时通常使用的技术是先预加载它。虽然有一些库可以为您预加载所有图像，但这里有一个非常简单、快速的预加载图像技术，在您应用 fadeIn 事件之前:

将图像作为隐藏图像放在 HTML 中:

<!-- Hidden by default, but now preloaded for a smooth fadeIn effect -->
<img id="myImage" src="/images/myImage.png" style="display:none" />

使用jQuery在绑定(bind)点击事件的同时添加隐藏图片:

如果图像在点击事件发生后会淡入，我发现这种技术非常有用:

// preload the image while registering the click event
$('<img id="myImage" src="/images/myImage.png" style="display:none" />')
    .append("body");

$('button').click(function() {
    $('#myImage').fadeIn();
});

使用 jQuery 的加载事件根据需要预加载图像:

用户可能永远不会点击按钮来显示图像；因此，这是一种在请求时预加载图像的技术，但仍然不会影响用户。如果用户决定不点击按钮，则永远不会从服务器请求资源。此外，由于我们在触发 fadeIn 事件之前等待图像加载，所以我们仍然可以获得我们正在寻找的平滑度，但在过程开始之前可能会有轻微的延迟。

// preload the image while registering the click event

$('button').click(function() {
    // place img element on page without specifying the src attribute
    $('<img id="myImage" style="display:none" />').append("body");

    // bind a load event to the image element so fadeIn doesn't start until
      // the image is completely downloaded
    $('#myImage').load(function() { 
        $(this).fadeIn();   // fade in the image
    });

});