Ajaxのローディング画像

Question

データを表示した後、私はPHPファイルからデータを取得するために、AJAXを使用していますに

function getdata(param) 
{ 
var xmlhttp =new XMLHttpRequest(); 
xmlhttp.onreadystatechange=function() 
{ 
if (xmlhttp.readyState==1||xmlhttp.readyState==2||xmlhttp.readyState==3) 
{ 

    document.getElementById('center_content').innerHTML="Loading...."; 
} 
else if (xmlhttp.readyState==4 && xmlhttp.status==200) 
{ 

document.getElementById('center_content').innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("POST","./includes/getd.php",true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded") 
xmlhttp.send("content_getter="+param); 
} 

とPHPファイルが

if($_POST['content_getter']=='home') 
{ 
echo<<<END 
    <div id="background2"> 
<img src="images/cent.jpg" class="stretch2" alt="" /> 
</div> 
DATA DATA DATA DATA 
END; 
} 

ようなものになりますさて問題は、divの中央コンテンツであります読み込み中...と読み込まれた後、画像の読み込みが開始されます。「読み込み中...」が表示されている間に画像を読み込み、一度に表示する画像を表示します。

Answer 1

you'rはjQueryのベースのソリューションを受け入れているので、そのようなことしてみてください：あなたが最初の隠されたdivの中にイメージをロードして、ターゲットのdivに（jQueryのを使用して）HTMLをコピーすることができます

function getdata(param) { 
    $('#center_content').html("Loading...."); 
    $.post("./includes/getd.php?content_getter=" + param, function(data){ 
     var img = new Image(); 
     img.onload = function(){ 
      $('#center_content').html(data); 
     }; 
     img.src = $(data).find("#background2 .strech2").attr('src'); 
    }); 
} 

Answer 2

を。