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 イベントでプリローダーを呼び出します。あれは：

<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 に答える