おすすめグッズや役立つ情報ブログ

Sedori Plan

jQuery

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をフェードインで表示させる。

まとめ

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

スポンサーリンク

アドセンス

アドセンス

  • この記事を書いた人
  • 最新記事

toney

サイトの構築、プログラムを制作をしていますtoneyと申します。中小企業、個人のホームページの制作、更新作業も承ります。 筋トレで自分を追い込んでいくのが楽しみです。最近マラソンにはまって2年連続名古屋シティマラソンに出ました。

-jQuery

Copyright© Sedori Plan , 2018 All Rights Reserved.