如何使用javascript正确切换图像？答案

【问题标题】：How to correctly switch images with javascript?如何使用javascript正确切换图像？
【发布时间】：2014-04-02 23:42:44
【问题描述】：

我的页面上有一些复杂的 div 结构，我想切换一些图像（悬停时），但我无法直接使用 css 设置悬停，因为我想要悬停的图像位于另一个透明图像的后面。因此我在顶部创建了透明覆盖。当overlay悬停时，切换指定div的背景。

HTML：

<div id="image"></div>
<div id="overlay"></div>

CSS：

#image {
    position: absolute;
    width: 300px;
    height: 300px;
    background: url(myImage.jpg);
}

#overlay {
    position: absolute;
    width: 300px;
    height: 300px;
}

这里是 jQuery 进行切换：

$(function() {
     $("#overlay").hover(function() {
          $("#image").css({
              "background": "url(myNewImage.jpg)"
          });
     }, function() {
          $("#image").css({
              "background": "url(myImage.jpg)"
          });
     });
});

它可以毫无问题地切换图像。问题是在切换图像时会有一点延迟，因此在片刻（不到一秒）您可以看到空白背景（当#image div 没有填充任何图像时）。

另一方面，当你使用没有 jQuery 的纯 CSS 来切换像这样的图像时（这是在这种情况下是不可能的）那么就不会有这样的延迟。

那么，使用 jQuery，你将如何防止这种延迟发生呢？或者有没有更好的方法来解决这个问题？

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您的问题是您通过 jQuery 加载的图像未预加载。切换图像时，图像需要一秒钟才能下载。当您在 CSS 中有图像 URL 时，所有这些图像都会与样式表一起下载。您的问题的解决方案是预加载您的图像。

【讨论】：

这是我的想法，但不确定。谢谢。
@MatúšDúbrava 我建议执行预加载是在您的脚本之前在隐藏的 div display:none 中获取这些图像。这将确保在从服务器完全下载图像之前脚本不会准备好。

【解决方案2】：

我不是 100% 确定，因为我不知道完整的情况，但从您提供的信息来看，纯 CSS 也应该是可能的：

#overlay:hover #image {
    background: url(anotherImage.jpg);
}

关于显示图片的延迟，您可以使用精灵。将两张图片放在一个文件中（例如在彼此上方），并在悬停时更改背景图片位置。

【讨论】：

不幸的是，正如我所说，这是不可能的。 DOM 结构过于复杂，CSS 无法处理。
你确定吗？因为 CSS 只是在做你的 JS 正在做的事情。当#overlay Div 悬停时，#image 会更改为背景图像。如果 id 是唯一的，那应该可以正常工作。
你不能像这样使用 CSS 选择器，它不起作用。
对不起，没有看到覆盖 div 出现在图像 div 之后 ;-) 否则：jsfiddle.net/236uQ

【解决方案3】：

您需要设置多个背景图片，以便加载两个图片。悬停时，切换background-position。

类似的东西：

$(function() {
     $("#overlay").hover(function() {
          $("#image").css({
              "background": "url(myNewImage.jpg) top left, url(myImage.jpg) 9999px 9999px"
          });
     }, function() {
          $("#image").css({
              "background": "url(myNewImage.jpg) 9999px 9999px, url(myImage.jpg)  top left"
          });
     });
});

#image {
    position: absolute;
    width: 300px;
    height: 300px;
    background:url(myNewImage.jpg) 9999px 9999px, url(myImage.jpg)  top left;
}

【讨论】：