【jQuery】画像のロード画面でフェードイン

jquery

画像をロードする時のロード画面ってなにげに分からないなーと思い調べてメモ。
基本的な流れとして下記のようにしてみた。

  • 読み込む画像のURL
  • ローディング画像を最初は透明にしておいてフェードインさせる
  • jQueryでimg要素を作成して初期は透明にしてattr()でsrc属性で読み込む
  • 画像を表示させるところにappendメソッドで追加する
  • loadメソッドで読みこんだ後の処理として、ローディング画像をfadeOutさせてその後に、img要素をfadeInさせる

ということで下記に一気にメモっとく

デモ(読み込みだけ)

デモ(クリックで5つの画像を順番に表示)