我在页面上有 anchor ，在鼠标悬停和鼠标移开时显示不同的背景图像。我已经预加载图像以避免闪烁并在鼠标悬停/移出时从服务器重新请求图像。这些脚本在 IE8/FF 上运行良好，但 Chrome 的行为有所不同。在最新版本的 Chrome 中，我第一次悬停在 anchor 上时，重新从服务器请求图像导致闪烁，这是为什么？成功的鼠标悬停/离开工作正常，没有闪烁。
代码如下:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style type="text/css">
body:after
{
content: url('/images/1.png') url('/images/1a.png')
position: absolute;
top: -9999px;
left: -9999px;
}
.imageHover
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1.png') no-repeat;
}
.imageOut
{
display:inherit;
width:25px;
height:50px;
background:url('/images/1a.png') no-repeat;
}
</style>
<script language="javascript" type="text/javascript">
var oneSelected = new Image();
var oneUnselected = new Image();
oneSelected.src="/images/1.png";
oneUnselected.src="/images/1a.png";
function OnImageMouseOver(target) {
$(target).toggleClass('imageHover', true);
$(target).toggleClass('imageOut', false);
}
function OnImageMouseOut(target) {
$(target).toggleClass('imageHover', false);
$(target).toggleClass('imageOut', true);
}
</script>
</head>
<body>
<a href="#" class="imageOut" onmouseover="OnImageMouseOver(this)" onmouseout="OnImageMouseOut(this)"></a>
</body>
</html>
已将 anchor 转换为图片，但它在 Chrome 中仍然不起作用:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script language="javascript" type="text/javascript">
if (document.images) {
var oneSelected = new Image();
var oneUnselected = new Image();
oneUnselected.src = '/images/1a.png';
oneSelected.src = '/images/1.png';
}
function OnRatingMouseOver(target, newSrc) {
$(target).attr('src', newSrc);
}
function OnRatingMouseOut(target, newSrc) {
$(target).attr('src', newSrc);
}
</script>
</head>
<body>
<div id="mainDiv" style="width:400px;">
<div id="inputDiv">
<table id="inputTable">
<tr>
<td>Rating</td>
<td>
<img id='rating1Anchor'
src='/images/1a.png'
onmouseover="OnRatingMouseOver(this, '/images/1.png');"
onmouseout="OnRatingMouseOut(this, '/images/1a.png');"
onclick="OnRatingClick(this, '/images/1.png', 1);">
</td>
</tr>
</table>
</div>
</div>
</body>
<html>
最佳答案
它可能根本没有预加载它们，因为它没有显示它们，它只是添加到 DOM 中？尝试使用以下代码预加载您的图片。
var preload = new Array();
function preload_image(){
for (var x = 0; x < preload_image.arguments.length; x++)
{
preload[x] = new Image();
preload[x].src = preload_image.arguments[x];
}
}
关于javascript - Chrome 图像预加载不适用于首次图像加载，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14135645/