jQueryでリンク先を同ページの要素内に読み込み＆フェードインさせたい。

Question

以下のようなことをjQueryで実現したいのですが、どういったコードを書けばよいでしょうか。

【HTML】

<div class="box"> <h1 class="title">タイトル</h1> <a href="http://test.test/" class="link">リンク</a> <div class="loadbox"></div> </div>

【実現したい動き】
１．リンクをクリック
２．linkとloadboxの間に<div class="loading">Loading...</div>を表示
３．hrefで指定されているURLのページ内容をloadboxに読み込む
４．内容が読み込まれたらloadingを消す
５．loadboxをフェードイン表示

【補足】
３の時点ではloadboxに読み込まれた内容は見えない状態ですが、領域は確保している。
（イメージで言うと透明度０％という感じです。）
重たい写真などを読み込む場合も確実に領域を確保（描画を終了）してからフェードイン表示させたいです。

Answer 1

描画をしてから表示する方法は知りませんが、よほど量が多くてクライアントの処理スピードが遅くない限り、レンダリングは一瞬で終わると思います。
なので、予め描画する必要はないと思います。

画像の取得が完了してから表示する、というのは可能です。
opacityを0にしておけば、領域は確保されます。
あとは、画像の取得が完了してloadイベントが発生したときにopacityを1に戻せばいいです。

demo