. JavaScript ‹ emwaiblog
JavaScript ‹ emwaiblog
JavaScript ‹ emwaiblog

emwaiblog

条件4、 後からでも簡単にローディングの表示が出来るような汎用性というか拡張性も欲しいです。そもそもですが、フェードインに関わらず表示や配置に関わるエフェクトは、 自体ではなくページ全体をラップした を用意したほうがCSSの困りごとが減ります。こうしたラッパーがあると、ライトボックスやスクロールボタン、外部サービスによって挿入される何がしか、などスクリプトによって後から 直下に追加される要素を分けて管理しやすくなります。

body < margin: 0; padding: 0; width: 100%; max-width: 100%; height: 100%; min-height: 100%; >/* ラッパー */ #wrapper < margin: 0; padding: 0; width: 100%; max-width: 100%; height: auto; min-height: 100%; display: block; overflow: hidden; position: relative; z-index: 1; >/* 古いIE対策するなら */ #wrapper < height: 100%; overflow: visible; >html > body #wrapper < height: auto; overflow: hidden; >/* ローディング */ #loading

条件5、 $(document).ready() でフェードするより window.onload のタイミングの方が遅いけどキレイです、というだけです。高さが指定されていない大きな画像とか描画の様子が見えてしまう場合でも、ロードイベントならスムーズな表示になると思います。

$(window).on('load', function()< $('#loading').fadeOut(2000, function()< $(this).remove(); >); >);

条件6、 内で読み込む外部スクリプトや大きなインラインスクリプトはページのレンダリングをブロックします。基本的には 内や の上部は必要最低限の短いインラインのみにして、その他のスクリプトは 下部に設置するようにします。GoogleのPageSpeed Insightsで高得点を叩き出すのであればjQueryの読み込みも一工夫必要ですがそれはまた別の記事にでも書きます。

body, #wrapper < margin: 0; padding: 0; width: 100%; max-width: 100%; >body < height: 100%; min-height: 100%; >#wrapper < height: auto; min-height: 100%; display: block; overflow: hidden; position: relative; z-index: 1; >#loading ); >);

レンダリングが始まる前にページを隠すレイヤー をラッパーの手前に作って、ページ読み込み完了後に fadeOut() します。 にクルクル回る背景画像を指定すればローディング画面になります。

を作っている場所は document.write() を使わず、且つ、ページのレンダリングが始まるよりも前、且つ、 を操作できる場所、ということになりますが、もっと他にいい案あればどなたか教えて下さい。

関連する記事 ページ上部やページ内へのリンクをスクロールさせる 2017年6月29日 2021年3月19日 jQuery、JavaScript jQueryでCSSのtransform: rotate()を使った回転アニメーションする際のメモ 2014年12月24日 2021年9月3日 jQuery、CSS、JavaScript Sassの@importを@use, @forwordに移行するメモ 2021年8月28日 2021年9月3日 CSS

今更ながらに知った @import の廃止に伴って、Dart Sassのモジュールシステム、@use、@forword に移行する方法を考えてみました。

カシムラのネックスピーカー買いました 2021年6月29日 2021年6月30日 Mac、iPhone コメントを残す コメントをキャンセル アーカイブ 最近のコメント
  • 画像（IMG要素）の読み込み後（loadイベント）の処理が動かない対策 に img のロードを検出する方法 [JavaScript/jQuery] – Site-Builder.wiki より
  • WordPress で SQLite を使う（さくらのレンタルサーバ ライト） に 森田 より
  • WordPress で SQLite を使う（さくらのレンタルサーバ ライト） に 木本 幸夫 より
  • データを移行したらメディアライブラリの画像が空っぽだった件 に 独自ドメインで運用しているWordPressのレンタルサーバーを他社に切り替えた場合の覚え書き | COREVALE コアベイル ただいまゲーム制作中 より
  • データを移行したらメディアライブラリの画像が空っぽだった件 に 2018年版：WordPressのサーバ移管と画像 | Te ador より
📎📎📎📎📎📎📎📎📎📎