爲ajax加載圖片

我是新來的ajax。在W3學校學習。現在我可以在網站中加載一部分內容。但是當加載發生時，我想向用戶顯示加載圖像。我在stackoverflow搜索。也發現了一些問題，但他們正在使用一些其他類型的ajax，這是我所不瞭解的。爲ajax加載圖片

這裏是我的代碼

<script> 
function loadXMLDoc(a) 
    { 
    var xmlhttp; 
    var temp = "myname.php?id=" + a; 


    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("myDiv").innerHTML=xmlhttp.responseText; 
      } 
      } 
    xmlhttp.open("GET",temp,true); 
    xmlhttp.send(); 
} 
</script> 



<h2>AJAX</h2> 
    <button type="button" onclick="loadXMLDoc('1')">Request 1</button> 
    <button type="button" onclick="loadXMLDoc('2')">Request 2</button> 
    <button type="button" onclick="loadXMLDoc('3')">Request 3</button> 
<div id="myDiv"></div>

如果有人能根據我的編碼，這將有助於給我一個例子或鏈接。

來源

2013-03-22 Adil Mahmud Choudhury

你能夠使用像jQuery一樣的Ajax框架嗎？否則，你可以添加一個響應示例嗎？ – JoDev 2013-03-22 16:21:36

建議jQuery發起ajax請求，因爲它是平臺兼容的。 – Shuping 2013-03-22 16:22:15

創建一個隱藏開始的<img>元素，然後當調用ajax時顯示它，並在完成時隱藏它。

<script> 
function loadXMLDoc(a) 
    { 
    var xmlhttp; 
    var temp = "myname.php?id=" + a; 

    // show the loading image 
    document.getElementById("loading").style.display = ""; 

    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) 
      { 
       // hide the loading image 
       document.getElementById("loading").style.display = "none"; 

       document.getElementById("myDiv").innerHTML=xmlhttp.responseText; 
      } 
      } 
    xmlhttp.open("GET",temp,true); 
    xmlhttp.send(); 
} 
</script> 



<h2>AJAX</h2> 

<img src="loading.gif" alt="Loading..." id="loading" style="display:none;" /> 

    <button type="button" onclick="loadXMLDoc('1')">Request 1</button> 
    <button type="button" onclick="loadXMLDoc('2')">Request 2</button> 
    <button type="button" onclick="loadXMLDoc('3')">Request 3</button> 
<div id="myDiv"></div>

對於未來的參考，Mozilla Development Network文檔是普通的JavaScript AJAX一個很好的資源。

來源

2013-03-22 16:26:19 MrCode

1）在HTML文檔中添加加載動畫圖像（img標籤），並把它放在你要顯示的，但您可以通過您的xmlhttp.send前設置display: none

2）用CSS隱藏（），通過設置圖像顯示圖像display: ''

3）在xmlhttp.onreadystatechange回調函數中，再次隱藏圖像以指示加載完成。

來源

2013-03-22 16:27:43 Shuping

爲ajax加載圖片

回答

相關問題