1

我正在制作这个网站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，所以它们需要几秒钟才能加载。

4

1 回答 1

3

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

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

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

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

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

但是，当我们添加诸如fadeIn 和fadeOut 之类的效果时，延迟的效果会变得非常明显。这是因为 JavaScript 事件实际上开始修改 img 元素的 CSS 属性，即使实际资源尚未准备好。

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

这个动作不是我们正在寻找的平滑、渐进的效果。

现在，您可能会注意到在您加载图像的第 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添加隐藏图片：

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

// 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 的 load 事件根据需要预加载图像：

用户可能永远不会点击按钮来显示图像；因此，这是一种在请求图像时预加载图像的技术，但仍不会影响用户。如果用户决定不点击按钮，则永远不会从服务器请求资源。此外，由于我们在触发 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
    });

});
于 2012-05-09T08:42:40.497 回答