CSS、jQueryが後から読み込みまれて要素が一瞬表示されてしまう時の対処

CSS、jQueryが後から読み込みまれて要素が一瞬表示されてしまう時の対処

便利なスクリプトを使ってWebサイトを構築することが多いです。
私がよく使うのがトップページのメイン画像のスライドショーのスクリプトです。

一瞬、画像が縦に並んで少し時間がたつとスライドショーが始まることがあります。原因はCSS、jQueryファイルの読み込みの問題です。

photo credit: Lupe und Notebook via photopin (license)

読み込まれる順番

  1. スライドショーのHTMLが読み込まれる
  2. スライドショーのCSSが読み込まれる
  3. スライドショーのJavaScriptが読み込まれる

(1)~(3)まで読み込まれる僅かな時間があって、その(3)まで読み込まれる一瞬画像が縦に並んでみえます。

一瞬表示される要素を表示されないようにする方法

ここからが本題です。

  1. JavaScriptが読み込まれるまで非表示
  2. JavaScriptが読み込まれたら表示させる

スライドショーのhtmlを囲っているCSS

この場合はスライドショーのhtmlを囲っている#slidershowを非表示にさせるためのCSS。

スライドショーのjavascript

CSSで非表示にした#slidershowをフェードインで表示させる。

まとめ

この方法で一瞬表示されている要素を直せます。ソースのタグを綺麗にしたりして時間がかかるのをこの方法だとすぐに直せます。

CSS、jQueryが後から読み込みまれて要素が一瞬表示されてしまう時の対処

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


*