ajax - 如何在使用ajax加载新内容时 "white out"旧内容？

Question

我刚刚制作了我的第一个事件加载器，我将在将 shipping_estimate.php 文件加载到当前文件时显示它。我还想做的是用半透明的白色图像覆盖旧内容，然后将加载器放在它上面。

我尝试将半透明图像设置为事件加载器 div 的背景，尝试了所有组合，但图像总是落后于加载的 php。

Ajax 函数:

function load_shipping(str)
{   
var xmlhttp;
showLoader(); 
if (str.length==0)
  { 
  document.getElementById("txtHint").innerHTML="";
  return;
  }

$(function() {
        $('#busy1').activity();
    });
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("shpquote").innerHTML=xmlhttp.responseText;
    $(function() {
        $('#busy1').activity();     
    }); 
    }
  }

xmlhttp.open("GET","shipping_estimate.php?c="+str,true);
xmlhttp.send();
}

<?php echo "load_shipping($c);";
?>
</script>

这是放置内容和加载器的地方。 class="trans_box1"表示它在CSS中设置了半透明背景图像。

<table  align="right">
<tr>
<td>
<div id="busy1" class="trans_box1">
<div id="shpquote">
</div></div>
</td>
</tr>
</table>

我从来没有，一次也没有在 shipping_estimate.php 的顶部得到图像，总是在它后面，也许是因为 php 总是在图像之后加载？

也试过了，不行，加载器根本不可见。

<div id="shpquote" class="trans_box1;position:relative;width:300px;height:300px;" style="float:left">
<div  id="busy1" class="trans_box2" style="position:absolute;z-index:999; width:300px;height:300px;">

Answer 1

你有点过于复杂了..你已经在使用 jquery 所以更简单的事情可能看起来像这样:

function loadShipping() {
 //Show the loader here
 //maybe something like 
 $('#busy1').css({'opacity' : '1'});
 $.get('shipping_estimate.php?c='+str, {}, function(response) {
   //The response is handled here
   $('#shpquote').empty(); // clear the old stuff
   $('#shpquote').text(reply); //or something similar
   $('#busy1').css({'opacity' : '0'}); //hide the loader or overlay
 });
}

希望这会有所帮助 - SO 上也有很多 jQuery ajax 示例。