Firefox・Safariでブラウザの戻るボタンを使うと画像がロールオーバーのままになる問題を解消

広告

JavaScriptの画像のロールオーバーを設定している画像をクリックしてページ遷移後、ブラウザの戻るボタンを押すと、Firefox・Safariでロールオーバー状態の画像のままになってしまう。(キャッシュが残ってしまう)

有名なバグみたいな仕様だったんですね。最近までなぜか気付かなかった!

検索してもぱっとした解消方法が見つからずだったんですが、たまたま気付きました!

解消方法

jQueryのバージョン1.3.2以下を読み込む(たとえjQueryを使用していなかったとしても)だけです!!!

普通に<head>内に読み込むだけでなぜかキャッシュが残らなくなりました。↓こんな感じで(完全に普通)

<script type="text/javascript" src="xxx/jquery-1.3.2.min.js"></script>

不思議だったのが、jQueryを使用していないロールオーバーのJavaScriptでも改善されたことです。(全くもってどこにもjQueryを使ってないのにです!!)

難しいことはわかりませんが、とりあえずなおるということで…お困りの際にはお試しください。
ちなみに、jQueryのバージョン1.4以上だとキャッシュが残ってしまい、解消されませんでした。

jQueryの昔のバージョンは下記からダウンロードできます。

http://docs.jquery.com/Downloading_jQuery#Past_Releases

検証したものについて

JavaScript
  • おそらく一般的な感じのjQueryなしのロールオーバーのスクリプト
  • おそらく一般的な感じのjQueryを使ったロールオーバーのスクリプト
  • なつかしのDreamWeaverが自動で書いてくれるやつ(スワップイメージ?)
ブラウザのバージョン
  • Firefox 13.0
  • Safari 5.1.7

jQueryのバージョン1.3.2以下じゃ困るんだ

最近はJavaScriptでいろいろしなくてはならない時代になってしまいました。
jQueryの新しい機能を使わないといけないからバージョン1.3.2以下だったらダメなことも多々あると思います。
そんなときのスマートな解決方法は分からないのですが、そういう場合に参考になるかもしれないと思ったサイトです。

ひとつめのリンク先のキャッシュしないようにするという設定は試してはないのですが、読み込みスピードが落ちてしまうのでは仕事では使えないなーと思いました。(スマホのこともあるし)
ふたつめのリンク先のonmouseoutと同じ設定をonmouseupにもつけるという方法が現実的だと思います。
ただ、デザインにもよると思うのですが、ページが遷移する前にちらつくのが気になって今回検証するにいたりました。

なので、jQueryのバージョン1.4以上を使用するサイトの場合はonmouseoutと同じ設定をonmouseupにもつける、そして神経質にならないことをおすすめします。

それでもどうにもならなかったらCSSの背景ですよね。


・・・意気揚々とここまで書きましたが、大発見をした気分になって会社の人にこの記事の内容を話したら「そんなんだれでも知ってることやろ」的なそぶりでした。
自分が知らなかっただけなのかも…ふ。
でも、検索してもすぐにでてこなかったので一応書きました。
あわよくば参考になれば幸いです。


広告
Ads by Sitemix