jQueryのコピペでできるローディングの実装方法
PRE PAGE
HOME > jQuery > jQueryのコピペでできるローディングの実装方法
2022年05月23日

jQueryのコピペでできるローディングの実装方法

みなさんこんにちは、エンジニアのjonioです。

最近ローディングを使っているサイトをよく見ますがjQueryを使ってコピペで実装できる方法を解説します。

デモは↓です。

 

 

ローディングに使うコード

未経験の人でCSSが意味がわからない人は完全にコピペで使ってください。

4行目はローディングしている時に表示したい内容を書いてください。

8行目はローディングが終わった後に表示したい内容を書いてください。

44行目〜46行目ですが44行目の「$(window).on(‘load’」で画面の読み込みが始まったらという意味です。

45行目の「$(‘.loading’).delay(900)」は.loadingの内容(4行目)を0.9秒表示するという意味です。

45行目の「.fadeOut(800)」は0.8行かけて消えるという意味です。

よって45行目は「ローディングの時に表示したい内容を0.9秒の間表示して0.8秒かけて消える」という意味です。

47行目〜52行目はローディングが終わらなかった場合の処理です。

50行目〜52行目は45行目と同じで「ローディングの時に表示したい内容を0.9秒の間表示して0.8秒かけて消える」という意味です。

47行目〜49行目は「50行目〜52行目の内容を1秒ごとに繰り返す」という事ですがローディングの時に表示したい内容を0.9秒の間表示して0.8秒かけて消える処理が1回されるとローディング画面はなくなるのでローディングが終わるという意味です。

これで完成です。

●いいねをつけてもらえると励みになります。