仅在 Chrome 中单击时输入图像消失答案

【问题标题】：input image dissappearing when clicked in Chrome only仅在 Chrome 中单击时输入图像消失
【发布时间】：2014-04-13 04:25:09
【问题描述】：

这是用于提交表单的图像输入代码。在最新的 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">

【问题讨论】：

标签： google-chrome cross-browser mouseevent forms

【解决方案1】：

您的代码在 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 标签，并且您的图像已经被预加载，因此您不应该期望像您那样切换图像会有任何延迟。

希望这会有所帮助！

【讨论】：

【解决方案2】：

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

-webkit-transform: translateZ(0.00001px);

【讨论】：