jqueryの $.getで画像以外を取得しておき、あとから画像を取得したい

Question

お世話になります、 jQueryの非同期通信について質問があります。 現状 取得するHTMLが

<div class='sample'>
 <div id="test">
   <div class="image">
      <img src='xxxx.jpg'>
      <p>xxxxxxxxxxx</p>
      <p>xxxxxxxxxxx</p>
   </div>
 </div>
</div>

$.get('/test_img', function(html) {
    var content  = $.grep($(html), function(e){ return e.id == 'test'; })
    $('.test_content').append(content);
  })

という構造になっており HTML は /test_img というURLでサーバーに置いてあります。
このデータを jQueryの $.get()で取得する際に、 画像データだけ取得しないようにしたいです。
画像データ以外の取得したデータはHTML側に表示させておき、 画像を表示させたい時(該当箇所までスクロールされた場合など)あとから再度、$.getで今度は先程のHTMLの画像だけを取得して　先に取得して表示していた部分に後から追加して画像を表示させたいです。 このようなことが可能でしょうか？？

現状考えているのが、画像の srcが　入っていない src="" となっている↑のHTMLコードを取得して　別途 <img>タグを取得して srcだけを抜き取って先に取得していた img タグの src に attr ではめ込む？のがいいのかな？など考えております。 <----- 実装は具体的にわかっておりません。。。

どなたかアドバイスをお願いいたします。

Answer 1

考えられているようにhtmlのimgにsrcを付けず、あとからurlをsrcに付与する形で良いと思います。

<div class='sample'>
 <div id="test">
   <div class="image">
      <img data-src='xxxx.jpg'><!-- data-srcに変える -->
      <p>xxxxxxxxxxx</p>
      <p>xxxxxxxxxxx</p>
   </div>
 </div>
</div>

//画像の表示方法例
$('img:not([src])').each(function () {
	$(this).attr('src', $(this).attr('data-src'));
})