全画面ローディング

デモ

LOADING...

ページを再読み込みしてお試しください。

JSコードコピー

使い方

全画面ローディング用の要素を1つ用意し、data-jscopyand="accordion"を付与してください。

サンプルHTMLを表示する

解説

JSコードの解説を見てみる

最初にファイル読み込みが開始される前の現在時刻を変数に格納します。
一瞬でローディングが消えるとチカチカしてしまうため、最低○秒は表示する、という制御のために使用します。

windowloadというイベントを設定することで、ページのファイル読み込みが終わった時に任意の処理を行うことができます。

基本的にはローディング要素を特定し、removeで削除すれば完成です。
冒頭で述べたチカチカ回避のため、ファイル読み込みが終了した現在時刻と、ファイル読み込みが開始される前の保持していた時刻を比較し、最低1秒間はローディングを表示するようにタイマーを設定しています。

ヘルプ・コンタクト

機能に関するご質問は、このページの下部に表示されている Twitter のアイコンから Twitter に遷移後、 DM 等でご連絡ください。
導入サポートやカスタマイズも有償にてお受け致しますので、 DM 等でご連絡ください。

他のコードを探す

リクエスト受付中です。
Twitter の固定ツイートか DM にてご連絡ください。