如何在內容完全加載之前顯示加載消息

我正在使用「http://www.w3schools.com/Php/php_ajax_database.asp」來顯示下拉列表中onchange數據庫中的數據。我在數據庫中有大量的數據。所以加載需要時間。因此，我想在頁面中的某處顯示加載消息，直到數據顯示。如何在內容完全加載之前顯示加載消息

代碼：

<script> 
function showUser(str) 
{ 
if (str=="") 
{ 
document.getElementById("txtHint").innerHTML=""; 
return; 
} 
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("txtHint").innerHTML=xmlhttp.responseText; 
} 
} 
xmlhttp.open("GET","getuser.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 

<form> 
<select name="users" onChange="showUser(this.value)" style="margin-left: -680px;margin-top: -10px;"> 
<option value="1">Current Projects</option> 
<option value="2">All Projects</option> 
</select> 
</form> 
</div></div> 
<div id="txtHint"> /*Content*/ </div>

getuser.php：數據庫查詢，以顯示數據。

來源

2014-02-26 user3317777

在我看來，更容易juse javascribt庫/框架像JQuery的Ajax請求或簡單的一切JavaScript。如果你想這樣做老派的方式，這應該能夠幫助你：

if(obj.readyState == 0) 
{ 
document.getElementById('copy').innerHTML = "Sending Request..."; 
} 
if(obj.readyState == 1) 
{ 
document.getElementById('copy').innerHTML = "Loading Response..."; 
} 
if(obj.readyState == 2) 
{ 
document.getElementById('copy').innerHTML = "Response Loaded..."; 
} 
if(obj.readyState == 3) 
{ 
document.getElementById('copy').innerHTML = "Response Ready..."; 
} 
if(obj.readyState == 4) 
{ 
if(obj.status == 200) 
{ 
    return true; 
} 
else if(obj.status == 404) 
{ 
    // Add a custom message or redirect the user to another page 
    document.getElementById('copy').innerHTML = "File not found"; 
} 
else 
{ 
    document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; 
} 
}

來源

2014-02-26 09:16:56

這是很容易實際上，只要把你想在div，這樣的消息/圖片：

<div id="txtHint"> Loading... </div>

當數據被加載並JS：

document.getElementById("txtHint").innerHTML=xmlhttp.responseText;

這將清空div和與Ajax內容替換。

其實，我認爲你的代碼已經在工作。

來源

2014-02-26 09:27:11 enguerranws

如何在內容完全加載之前顯示加載消息

回答

相關問題