在立即显示新图像时交换图像而不会闪烁答案

【问题标题】：Swap an image without flicker while showing the new one immediately在立即显示新图像时交换图像而不会闪烁
【发布时间】：2015-10-02 14:12:49
【问题描述】：

TL;DR：有没有办法可靠地交换图像，同时显示当时正在加载的任何图像而不会导致页面闪烁？

我有 2 个图像和 2 个按钮，当我将鼠标悬停在一个按钮上时，它会显示一个图像。将鼠标悬停在另一个按钮上会切换到第二个图像。我是这样做的：

$('#button1').mouseover(function() {
    $('#image').attr('src', 'image1.png');
});

$('#button2').mouseover(function() {
    $('#image').attr('src', 'image2.png');
});

这可以正常工作，但是当第一个图像已加载而第二个未加载时，它在完成加载之前不会显示第二个图像。为了尝试向用户提供一些新图像何时加载的指示（他们希望立即出现），我强制它在这些交换之前添加一个空图像，如下所示：

$('#button1').mouseover(function() {
    $('#image').attr('src', '#');
    $('#image').attr('src', 'image1.png');
});

$('#button2').mouseover(function() {
    $('#image').attr('src', '#');
    $('#image').attr('src', 'image2.png');
});

这在加载一个图像时非常有用，通过在加载时显示图像，但现在一旦加载了两者，它们之间的空图像会在切换图像时导致闪烁。我想我可以通过在加载两个图像后关闭空图像来解决这个问题，但事实证明这是不可靠的。 $('#image').prop('complete') 和 imagesloaded 在 stackoverflow 的其他位置建议在注意图像是否已加载时不一致。检测加载的图像似乎是一条死胡同。

我还考虑过尝试强制图像在创建前后显示和隐藏，但这似乎根本不起作用，尽管我不确定为什么。新的在加载时不显示，我不确定它们是否正确交换：

$('#button1').mouseover(function() {
    $('#image').hide();
    $('#image').attr('src', 'image1.png');
    $('#image').show();
});

$('#button2').mouseover(function() {
    $('#image').hide();
    $('#image').attr('src', 'image2.png');
    $('#image').show();
});

有没有办法可靠地交换图像，同时显示当时正在加载的任何图像，而不会导致我没有尝试过的页面闪烁？

【问题讨论】：

我的问题与this 非常相似，但我的图片总是在加载第一张图片时逐步加载。

标签： javascript jquery html image

【解决方案1】：

您想要做的是预加载图像，以便将它们缓存在浏览器中。那么您的鼠标悬停不会有任何延迟。这是一个用于缓存图像并调用它们的 jquery 插件。

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['image1.png','image2.png']).preload();

这不是我的代码：感谢 James @Preloading images with jQuery

【讨论】：

这很有趣，但我不明白最后的行选择器。就我know 而言，这不是一个有效的选择器，我找不到它的文档。此外，似乎将 src 分配给 $('<img/>')[0].src 会预加载它，但我不知道为什么。这个对象的索引不应该随着每次新添加而增加，而不是被最新的元素替换吗？不应该是所有图片都预加载吗？
嗯。所有这些解决方案都避免了我的主要问题：正在加载的新图片必须在图像交换后立即出现。图像是否完全加载无关紧要。通过实现预加载，我可能会启用许多图像来占用我的带宽，同时只等待一张图像出现。请参阅arewecompressedyet.com 上的图片页面了解其使用方式。
我不知道 arewecompressedyet.com 是什么。所以这对我没有帮助。 “正在加载的新图片必须在图像交换后立即出现。图像是否完全加载无关紧要。”？？？图片没有加载怎么会出现。这是没有意义的。我试图为您提供一种将图像预加载到浏览器缓存的方法，以便在交换图像时可以显示图像。您唯一的其他选择是隐藏整个页面并仅在 $(window).load 上显示它。然后在页面显示之前加载所有图像
$(['image1.png','image2.png']) 只是一个 jquery 数组，您可以在其上调用 preload 方法。就像 $('') 在内存中创建一个 img 标签。它也不是一个“有效”的选择器。它不是从您的页面中选择图像，不会有“”。但它会创建 jquery 对象。 preload 方法循环遍历数组并将图像标签的 src 分配给数组项的字符串值。图像的索引无关紧要。目的是将图像加载到浏览器缓存。通过设置图像的 src，您可以调用 http 来加载它。
嗯...我认为该网站会更明显。对于那个很抱歉。该站点是用于 WIP 视频编解码器的图像比较工具。基本上，它会从特定的编解码器版本中生成 100 张图像。然后，选择 2 个不同的修订版，您可以比较不同修订版的同一图像，以查看编解码器更新的结果。现在，这些图像可能看起来几乎完全相同，因为编解码器版本可能非常小。问题是当您将鼠标悬停在切换器上以与新切换器进行比较时，您认为它们必须相同，因为图像尚未下载。

【解决方案2】：

尝试将图像源存储到 JavaScript 变量中，并使用这些变量交换图像源。

这可能会避免加载，不确定，但可能会。

【讨论】：

【解决方案3】：

试试这个：

var preloadImages = ['image1.png', 'image2.png'];
$('#button1').mouseover(function() {
    $('#image').attr('src', preloadImages[0]);
});

$('#button2').mouseover(function() {
    $('#image').attr('src', preloadImages[1]);
});

【讨论】：

是的，你的权利，他需要在交换之前先加载图像。

【解决方案4】：

问题是通过更改src 位置来更新此HTML 内容会使浏览器等到图像加载后才显示图像。这似乎不可修改。

HTML：

<img id="image" src="">

和具有这种行为的 javascript：

$('#button1').mouseover(function() {
    $('#image').attr('src', 'image1.png');
});

$('#button2').mouseover(function() {
    $('#image').attr('src', 'image2.png');
});

更改 HTML：

<div id='image_container'> </div>

和 javascript 到：

$('#button1').mouseover(function() {
    // Remove the old image and replace it with the new one
    $('#image_container').empty()
                         .append("<img id='image' src='image1.png'>");

});

$('#button2').mouseover(function() {
    $('#image_container').empty()
                         .append("<img id='image' src='image2.png'>");
});

使浏览器在下载图像时显示图像。我不太确定为什么，但似乎只是新的<img>s 的处理方式与<img>s 的处理方式不同，src 修改。

【讨论】：