Question

我的页面上有一些复杂的div结构，我想切换一些图像（悬停时），但是我不能直接用css设置悬停，因为我想悬停的图像是在另一个透明图像后面。因此我在顶部创建了透明覆盖。悬停叠加层时，会切换指定的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，你会如何防止这种延迟发生？或者有更好的方法来解决这个问题吗？

Answer 1

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

Answer 2

我不是百分百肯定，因为我不知道完整的情况，但是你提供的信息应该可以使用纯CSS：

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

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

Answer 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;
}

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

3 个答案: