AJAX加載指示燈

我用這個AJAX代碼：AJAX加載指示燈

<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code 
function ajaxFunction(){ 
    var ajaxRequest; // The variable that makes Ajax possible! 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      var ajaxDisplay = document.getElementById('ajaxDiv'); 
      ajaxDisplay.innerHTML = ajaxRequest.responseText; 
     } 
    } 
    var age = document.getElementById('age').value; 
    var wpm = document.getElementById('wpm').value; 
    var sex = document.getElementById('sex').value; 
    var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex; 
    ajaxRequest.open("GET", "file.php" + queryString, true); 
    ajaxRequest.send(null); 
} 

//--> 
</script>

如何指示AJAX加載？

來源

2010-07-15 lam3r4370

常見的情況是顯示動畫gif圖像或更改鼠標光標在ajax請求開始處和結束時。

Gif簡單得多。喜歡的東西（我用的JQuery語法）：對於啓動：

$("#progressIndicator").show();

在你的onreadystatechange處理

$("#progressIndicator").hide();

來源

2010-07-15 09:13:36 st78

函數ajaxFunction（）{ - {show（）'後面的I.e。在onreadystatechange - 'hide（）' ？ – lam3r4370 2010-07-15 09:22:50

是的，在你的ajaxFunction（）的末尾顯示進度指示器 – st78 2010-07-15 09:34:09

在這個頁面你可以輕鬆生成動畫gif：http://ajaxload.info/ – st78 2010-07-15 09:36:20

如果您使用JQuery，你可以做這樣的事情：

$("#progressIndicator").show(); 

var age = $('#age')[0].value; 
var wpm = $('#wpm')[0].value; 
var sex = $('#sex')[0].value; 
var queryString = "?age=" + age + "&wpm=" + wpm + "&sex=" + sex; 

$.get("file.php" + queryString, function (data) { 
    $("ajaxDiv").html(data); 
    $("#progressIndicator").hide(); 
})

你可以看到更多關於JQuery的get方法 here

來源

2010-07-15 10:10:31 Axe

您可以綁定放映/在你的應用程序在全球隱藏（或只是在它的某些部分），可通過下列事件：

$(document).on({ 
    ajaxStart: function() { $body.addClass("loading"); }, 
    ajaxStop: function() { $body.removeClass("loading"); } 
});

然後你定義的類裝載：

/* Start by setting display:none to make this hidden. 
    Then we position it in relation to the viewport window 
    with position:fixed. Width, height, top and left speak 
    for themselves. Background we set to 80% white with 
    our animation centered, and no-repeating */ 
.modal { 
    display: none; 
    position: fixed; 
    z-index: 1000; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    background: rgba(255, 255, 255, .8) url('../Images/Loader.gif') 50% 50% no-repeat; 
} 
/* When the body has the loading class, we turn the scrollbar off with overflow:hidden */ 
body.loading { 
    overflow: hidden; 
} 

/* Anytime the body has the loading class, our modal element will be visible */ 
body.loading .modal { 
    display: block; 
}

在這樣您就不需要爲每個Ajax調用管理加載效果，並且可以在整個應用程序中保持一致的樣式。

來源

2015-12-17 14:17:21

AJAX加載指示燈

回答

相關問題