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在注意图像是否已加载时不一致。检测加载的图像似乎是一个死胡同。

我还考虑过强迫图像在创建之前和之后显示和隐藏，但这似乎根本不起作用，虽然我不知道为什么。加载时没有显示新的，我不确定它们是否正确交换：

$('#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

Answer 2

试试这个：

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

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

Answer 3

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

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

Answer 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的{{1}}修改方式不同。

在没有闪烁的情况下交换图像，同时立即显示新图像

4 个答案: