Question

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

onmousedown / onmouseout可在Chrome中运行，但图像更改有延迟，提示显示：无图像不缓存。这不会发生在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">

Answer 1

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

在您的头部标签内包括：

<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标签，你的图像已经预先加载了，所以你不应该期望任何延迟切换图像。

希望这有帮助！

Answer 2

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

-webkit-transform：translateZ（0.00001px）;

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

2 个答案: