Question

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

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

这在opera和chrome上工作得很好，但在firefox上，fadein就像太慢了，渐渐消失的img（在我说的时候并没有真正消失，只是被覆盖）动画结束时的动作，出现然后消失。

我不确定导致这种情况的原因是什么，以及导致Firefox中缓慢淡化的原因是什么？

以下是处理淡入淡出事物的代码：http://jsfiddle.net/VbjPc/1/

感谢任何帮助。

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

我已使用我用于预加载图像的代码更新了jsfiddle http://jsfiddle.net/VbjPc/1/。新代码位于底部。我认为预加载是有效的，因为在图像加载之前没有任何反应，你可以知道它们是〜500kb，因此加载它们需要几秒钟。

Answer 1

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

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

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

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

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

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

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

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

现在，您可能会注意到第2次，第3次，第4次或第n次加载图像时不会发生这种情况。在浏览器缓存图像的情况下，延迟会大大减少，并且fadeIn / fadeOut效果会出现。顺利而渐进。

我在淡入图像时通常使用的技术是首先预加载它。虽然有些库可以为您预加载所有图像，但在应用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的加载事件根据需要预加载图像：

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

});

javascript fadein / fadeout，在firefox中淡出img flicks

1 个答案: