SPOTブログ

パララックスなjQueryスライダーSequence.jsがIEではロード中で止まってしまう件の解決方法

追記2013-1/15： v0.8 18/11/2012のアップデートにて、この問題は解決したそうです。（未確認）

最近はやりの技術といえば、やはりパララックス(parallax)。

視差効果を使って、複数の要素をずれてスクロールさせることで立体感を出すという手法ですが、パララックスなスライダー(slider)を作れるsequence.jsというjqueryのプラグインを使ってみたところ、IEだと画像のロード処理のまま、スライダーが始まらない、という現象に遭遇してしまいました。

公式に公開されているデモでもIE9 IE10で見てみたところ、同様の現象が発生してしまったので、カスタマイズ起因のバグではなさそうです。

IEではキャッシュ判別にバグがあるとのことで、それが起因だとは思うので、画像の読み込み時に?乱数を付けて対処してもなおるのかもしれませんが、今後のメンテナンスで面倒だったので、画像のプリロードをやめることでとりあえず対処しました

デモのオプション設定でこうなっているところを、

このように修正しました。
preloaderをfalseで無効にして、プリロードに関するpreloadTheseFrames: []とpreloadTheseImages: []の記述を削除。

これで画像のプリロードは無効になりましたが、ロード中で止まってしまうことは無くなりました。

開発者様のサイトのコメント欄でも同じような報告が合ったのですが、未解決なようだったので、とりあえずこの方法で対処しておけば大きな問題は無いのでは無いでしょうか？