如何在使用ajax加載新內容時「白掉」舊內容？

我剛剛製作了我的第一個活動加載器，我將在將shipping_estimate.php文件加載到當前文件時顯示該加載器。我還想要做的是讓舊內容覆蓋半透明的白色圖像，然後在其上放置加載程序。如何在使用ajax加載新內容時「白掉」舊內容？

我試圖將半透明圖像設置爲活動加載器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是圖像後總是loade？

也試過這個，不起作用，loader根本看不到。

<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;">

來源

2013-05-14 kalle

你這個過於複雜一點..你已經在使用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 
}); 
}

希望這有助於 - 有很多jQuery的AJAX的例子上也是如此。

來源

2013-05-14 20:08:27

如何在使用ajax加載新內容時「白掉」舊內容？

回答

相關問題