Chapter.2】2019.05.10ウェブ制作こんにちは。エンジニアの山岡です。LOADINGって出してみたい【ローディング画面を実装するChapter.1】をまだ読んでいない方はこちらからご覧ください。今回はjQueryを使ってローディング画面を実装していきます。使い古された方法ですが、むしろ新鮮な気持ちで見ていきましょう。次回DEMOローディング画面→読み込み完了サンプルはこちらHTMLまずは悪魔の儀式。jQueryを読み込みます。src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>読み込み中はローディング画面が表示され、読み込みが完了するとフェードアウトして非表示になり、コンテンツが表示されます。inline-block;}JavaScriptCSSの.is-hideクラスによってローダーと背景は非表示にしてあります。そこでまず一番初めに、JavaScriptの実行と同時にremoveClass()を使って.is-hideクラスを外すことでローダーの非表示を解除しています。その結果、ローダーが表示されます。読み込み中はローディング画面が表示され、loadイベントが発火したら非表示になる仕組みです。通信状況によってなかなかloadが発火しない可能性もあります。そこで安全策として、setTimeout()を使い、10秒経ったら強制的にローディング画面を非表示にする処理を入れています。今回は、世間の流れに逆らってjQueryを使ったローディング画面の実装方法をご紹介しました。次回は脱jQueryということで、ライブラリを使わずJavaScriptとCSSだけで実装していきます。Yamaoka庶民の私にもできる高級感のあるサイトの作り方。プランCREATIOOON・・・エコクリが運営するWEBメディアCONTACT・・・お問い合わせCONCEPTSERVICECONSULTINGABOUTMEMBERSWORKSREVIEWPLANSCREATIOOONCONTACT。