初心者向け。コピペでできるjQueryのローディングの実装方法
701 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアの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回されるとローディング画面はなくなるのでローディングが終わるという意味です。
これで完成です。