如何用JavaScript正确切换图像？

我在页面上有一些复杂的div结构，我想切换一些图片（悬停），但我不能直接设置悬停与CSS，因为我想悬停在另一个透明图像后面的图像悬停。因此我在顶部创建了透明叠加层。当叠加层悬停时，指定div的背景被切换。如何用JavaScript正确切换图像？

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没有填充任何图像时）会有小的延迟。

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

所以，使用jQuery，你会如何防止发生这种延迟？或者有更好的方法来解决这个问题吗？

来源

2014-04-01 Matúš Dúbrava

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

来源

2014-04-01 03:25:49

这就是我的想法，但不确定。谢谢。 –

@MatúšDúbrava我建议执行预加载是在脚本之前在隐藏div' display：none'中获取这些图像。这将确保在从服务器完全下载图像之前脚本不会准备好。 – SaidbakR

我不是100％肯定，因为我不知道完整的情况，但来自什么样的信息您提供，应该可以用纯CSS以及：

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

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

来源

2014-04-01 03:24:48 Robin

可惜的是，我已经声明这是不可能的。对于CSS来说，DOM结构太复杂了。 –

你确定吗？因为CSS只是在做你的JS正在做的事情。当#overlay Div悬停时，#image将更改背景图像。如果这个ID是独一无二的，那就应该很好。 – Robin

你不能像这样使用CSS选择器，它不起作用。 –

你需要的是设置多个背景图片，所以这两个图片都是加载。悬停时为，开关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; 
}

来源

2014-04-01 03:27:59

如何用JavaScript正确切换图像？

回答

相关问题