先日、以下のようなエントリーを書いたのですが、
jQueryでページ遷移時にフェードインフェードアウトの効果をつける
いくつか気になる点がありましたので補足記事です。
IEでfadedIn、fadeOutが効かない事がある
こちら、ちょっと挙動が変になってしまいます。ちなみにIE全般(10は未検証)です。
背景画像だけがフェードアウトしたりとかで、テキストが全く消えなかったりします。
色々とググってみると参考記事は多々で、原因と対策は色々、さすがIEの面目躍如って感じです。ちっ
IE8 で jQuery の slideDown() と fadeIn() が効かないことがある件
ですとか
ですとか。で、僕の場合は以下が参考になりました。
IEの場合、フェードイン、アウトの対象としたい要素にpositionを設定していたらfadeInなどが動きません。
それをはずしたら、それだけで正常動作するようになりました。
ちなみに上記記事ではrelative、absoluteの場合に、という書き方になっていますが、今回fixedも使っていてそこもダメでした。いやもうどうにかしてくれーーって感じですね。
あ、参考までにですが、二つ目のエントリにあったIE7互換モードにした際、GoogleMapが表示されないという不具合が出てしまいましたので、IE7互換モードは僕ははずしました。
画面遷移時に読み込みの白い画面が目立ってしまう
これは根本的にはどうしようもない問題だとは思うのですが、お客様からどうしても気になるといわれてしまいました。基本背景が黒のサイトでしたので、黒背景⇒白い読み込み画面⇒黒背景というのはやはり目だってしまったみたいです。
色々とチューニングを行った結果、かなりの改善はしました。コードの記述順とか馬鹿にできないですね。
これ一番問題だったのはやはりheadにいろんなものを詰め込みすぎていることで、ここを展開、処理してる間はbodyは描画されないみたいですね。特にやや古いPCだとさらに顕著みたいです。
そこで、ライブラリ系のリンクを全て</body>の直前に移し、headに含めるのはjqueryと、onloadなどのスクリプトの開始処理のみとしました。
そして、jsのライブラリ系を圧縮したもの(XXX.min.jsとかのあれですね)に変えました。ファイルサイズの桁が一個違ったりするのでこれも馬鹿にできないです。
さて、そうすることで、一見白い画面は見えなくなりました。
これすっごく遅い環境だったら結局は同じだと思うので根本的な解決ではありませんが、
とりあえず目の前のことがクリアできればいいじゃない、ってことはきっとあるはず・・・
ウェブ系のお仕事はこの異なるユーザー環境への対応が大変ですよね。特にIE。いつまで僕らを苦しめるんでしょうかw