Blog

jQueryで簡単なloading画面を作る

2013.07.30Cat:jQuery デザイナー

最近ではネットの回線速度も速くなり、画像などの読み込みはほぼ一瞬で終わることが多くなりましたが、

パララックスを使ったサイトなどで大量の画像を使う場合には、やはりそれなりに読み込むまでに時間がかかってしまいます。

 

そういった場合、待っている時間を少しでも退屈させないためにローディングのアニメーションを表示することが多いですが、

今回は実装のときに迷わないために、jQueryを使ったローディング画面の実装方法について、

復習してみました。

 

↓今回作ってみたもの

(注:ローディング画面確認のため、容量の大きな10MBの画像が含まれています)

DEMO

 

今回は、

前もってローディングの画面を予め配置しておいて、

ページ内の要素が読み込み終わったらローディング画面を非表示にするという方法をつかいました。

 

HTML

 

CSS

画面全体をローディング画面が隠すような配置にしています。

 

JavaScript

loadイベントでページ全体が読み込み終わるのを待ち、

読み込み終わったら、fadeOut()でローディング画面を非表示にしています。

 

はじめはローディング画面をjQuery内で追加しようとしたのですが、

画像が読み込まれるまでjQuery自体が動かないために、

ローディング画面が表示される前に画像が読み込まれている様子が表示されてしまうという状態になってしまったため、

断念して前もってHTMLに書き込んでおく方法を取りました。

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ