Question

I am using ajax to get data from a php file

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);
}

and the php file looks something like

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

Now the problem is that the div center content shows loading… and after that it starts loading the image.I want the image to be loaded while the “Loading…” is being displayed and then image to be displayed in one go.

Answer 1

Since you’r accepting jQuery based solutions, try something like that:

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');
    });
}