Web制作の技術情報を中心に、WordPress、jQuery、CSSなどの情報など幅広く発信中。Web制作スキルや知識のアウトプットブログです。

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。

#slidershow{ 
	display:none;
}

スライドショーのjavascript

<script type="text/javascript">
    $(window).load(function() {
		$('#slidershow').fadeIn(0); 
    });
</script>

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

まとめ

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

[amazonjs asin="B00GQU2U9W" locale="JP" title="現場でかならず使われている CSSデザインのメソッド"]

スポンサーリンク
  • この記事を書いた人
  • 最新記事
しん

しん

Webサイトの構築、プログラムを制作しています。中小企業、個人のホームページの制作、更新作業も承ります。 仕事以外はバスケをしたり、ジムで筋トレしております。 映画/海外ドラマ/プログラミング/バスケ/トレーニング/カナダ/カメラ・写真

-jQuery

Copyright© Sedori Plan , 2019 All Rights Reserved.