Question

我使用ajax从php文件中获取数据

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

既然您接受基于jQuery的解决方案，请尝试类似的方法：

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

您可以先将图像加载到隐藏的div中，然后将html（使用jQuery）复制到目标div。

Ajax在显示数据后加载图像

2 个答案: