slick.jsの小ネタ – センターモードで画像が上手く読み込まれないとき

Java-scriptiOSアニメーション

何かと便利なslick.js。

スライドINしてくる画像がうまく表示されない

iOS(Androidでもそうかも?)で、センターモードにしている場合。

画面外にあった画像がブラウザ描画領域内にINしてくるとき、画像の領域全部が入るまで描画されないことになってました。いままでそんなことなかった気がする。

 

「lazyLoad: ‘progressive’」かな?と思い「ondemand」にしても変わらず、、、

slick.jsのオプションではどうにもならないっぽい。

もうじき公開予定のサイトで発生したので、ゆっくり調べている時間なし。困った。

 

slick内のimgタグの問題なら、ラッパーの背景にしてやれば良いんでないか?

と思いついて試したところビンゴ。iOSでも正常に表示されました。

 

  • HTMLやCSSによっては背景処理できないことがあるかも
  • ラッパーにいちいち高さ指定もしてやる必要がある

ので良い回避策ではないと思うけれど、とりあえず!な場合に。