imgタグのsrcをreplace
画像をマウスオーバーしたときにJavaScriptでimgタグのsrcを変更して別の画像に入れ替えるサイトをよく見かける。
しかし、このやり方には2つの問題点がある。
1つ目はsrcを変更してから別の画像を読み込むまでの間は画像が何も表示されなくなってしまうこと。(キャッシュがあれば別だが)
2つ目はiOSのSafariだと画像をJavaScript入替で表示されなくなるバグがあることだ。
発生条件
具体的には以下の条件により発生する。
- iOS Safari (バージョンは関係なし)
- JavaScriptでhoverによりimgのsrcが別の画像に変更されるようになっている。
- 該当の画像にリンクがあり、タップ後にリンク遷移したあと戻る。
CSSスプライトなら発生しない？
CSSの:hoverなら画像は消えないが戻った時に:hoverで指定した画像が表示されてしまうためいずれにしろ適切ではない。
iOSのSafariだと画像をJavaScript入替で表示されなくなるサンプル
