0

这是用于提交表单的图像输入的代码。在最新的 Firefox 和 IE 中看起来不错。在 Chrome（版本 30.0.1599.101 m）中，单击时图像会消失，在表单提交之前显示带有替代文本的空轮廓。没关系，但很烦人，如果可能的话，我想修复。有人知道如何防止这种情况吗？

onmousedown/onmouseout 在 Chrome 中有效，但图像更改存在延迟，表明 display:none 图像未缓存。这在 IE 或 Firefox 中不会发生。

注意：外部 CSS 与其唯一的边距、边框等无关。

<input class="buy_butt" src="/img/gen/buy-now.gif" id="addtocart" name="addtocart" onmousedown="this.src='/img/gen/buy-now-onclick.gif'" onmouseout="this.src='/img/gen/buy-now.gif'" alt="add to cart" type="image">
<img src="/img/gen/buy-now-onclick.gif" style="display:none;" alt="add to cart onclick">
4

2 回答 2

0

您的代码在 Chrome 中似乎对我有用。但是，您是否尝试在页面的 onload 事件中手动预加载图像？

在你的 head 标签内包括：

<script language = "JavaScript">

function preloader() {
    buyNowOnClick = new Image(); 
    buyNowOnClick.src = "/img/gen/buy-now-onclick.gif";
}

</script>

在文档的 onload 事件中调用 preloader。那是：

<body onload="javascript:preloader()">

<!-- Your Page goes here -->

</body>

有了这个，就不需要添加隐藏的 img 标签，并且你的图像已经被预加载，所以你不应该期望像你这样做的任何延迟切换图像。

希望这可以帮助！

于 2013-10-20T23:23:03.437 回答
0

我在 Chrome 中也遇到了这个问题，这似乎不是预加载问题，因为正常和悬停图像看起来很好，直到单击输入，此时输入被替换为带有 alt 的框文本。通过http://mir.aculo.us/2011/12/07/the-case-of-the-disappearing-element/，将此样式添加到输入使问题消失：

-webkit-transform: translateZ(0.00001px);

于 2014-04-12T20:25:09.390 回答