javascript - 交换图像而不闪烁，同时立即显示新图像

Question

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();
});

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

Answer 1

您想要做的是预加载图像，以便将它们缓存在浏览器中。然后鼠标悬停就没有延迟。这是一个用于缓存图像和调用它们的 jquery 插件。

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

// Usage:

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

这不是我的代码:归功于 James @ Preloading images with jQuery