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中设置了半透明的bg图像。

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

我从来没有，没有一次将图像放在shipping_estimate.php的顶部，alwais背后，也许是因为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示例。

如何用ajax加载新内容时“老化”旧内容？

1 个答案: