今回はローディング画面をjQueryで実装する方法を紹介します。アニメーションや画像を多く使っているサイトにおすすめです。デモサイトこの記事の目次HTMLに書くことCSSに書くことimagesLoaded.jsを読み込むjQueryに書くことローディング画面をjQueryで実装する方法ほとんどの場合は画像のサイズを見直すことで表示スピードは改善されます。それでも読み込みに3秒以上かかる場合はローディング画面の実装を検討してみてください。HTMLに書くことHTMLにローディング表示に必要は記述をしていきます。以下のコードはの直後に貼り付けていきましょう。id="loading-main"></div></div>CSSに書くことローディングの回転している部分は画像ではなく、CSSで実装します。サイズや色の変更もCSS上でできるので、画像を使うより便利です。}imagesLoaded.jsを読み込むjQueryのコードを書く前に、画像を正確に読み込めたか判別できるimagesLoaded.jsを読み込みます。背景画像の読み込みまで判定してくれるのでオススメです。・imagesLoaded.js以下のようにloadを使って実装するところが多いですが、画像の読み込み判定が曖昧です。//画像を読み込めたタイミングが曖昧});imagesLoaded.jsはCDNが用意されているので、以下のように<head>の中に記述すれば読み込み完了です。src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>jQueryに書くことページにある画像(背景画像も含む)がすべて読み込まれたら、ローディング画面をフェードさせます。読み込みに5秒以上かかっている場合は、強制的にローディング画面を非表示にします。});}これでローディング画面が実装できました。フェードの時間はお好みで変更してみてください。フェードする時間が短すぎると違和感があるので、少し余裕を持たせましょう。さいごに...本来はローディング画面を実装せずに、高速でページを表示できることがベストです。loadのような画像遅延読み込みプラグインを使ったり、画像サイズを小さくすれば表示スピードを上げることができます。サイトの高速化については以下の記事に書いたので参考にしてみてください。【WordPress】サイトを高速化させる7つのステップ!〜表示速度をサクッと改善2020.02.08アニメーションを多く使う場合は画像を読み込まれていないとエラーになることもあるので、ローディング画面を実装したほうが良いでしょう。