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

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

---

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

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

当一个图像通过在加载时显示图像而加载时，这种方法很有效，但现在一旦加载图像，它们之间的空图像在切换图像时会导致闪烁。 我想我可以通过在两个图像加载后关闭空图像来解决这个问题，但事实certificate这是不可靠的。 在stackoverflow上的其他位置建议的$('#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(){ $('')[0].src = this; }); } // Usage: $(['http://sofzh.miximages.com/javascript/image1.png','http://sofzh.miximages.com/javascript/image2.png']).preload(); 

这不是我的代码： 赞美 James @ 使用jQuery预加载图像

Answer 2

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

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

Answer 3

试试这个：

 var preloadImages = ['http://sofzh.miximages.com/javascript/image1.png', 'http://sofzh.miximages.com/javascript/image2.png']; $('#button1').mouseover(function() { $('#image').attr('src', preloadImages[0]); }); $('#button2').mouseover(function() { $('#image').attr('src', preloadImages[1]); }); 

Answer 4

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

HTML：

和javascript有这种行为：

 $('#button1').mouseover(function() { $('#image').attr('src', 'http://sofzh.miximages.com/javascript/image1.png'); }); $('#button2').mouseover(function() { $('#image').attr('src', 'http://sofzh.miximages.com/javascript/image2.png'); }); 

---

更改HTML：

和javascript：

 $('#button1').mouseover(function() { // Remove the old image and replace it with the new one $('#image_container').empty() .append(""); }); $('#button2').mouseover(function() { $('#image_container').empty() .append(""); }); 

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