显示LOADING直到页面完全加载

我有这个JavaScript：显示LOADING直到页面完全加载

function createRequestObject(){ 
    var req; 
    if(window.XMLHttpRequest){ 
     //For Firefox, Safari, Opera 
     req = new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject){ 
     //For IE 5+ 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else{ 
     //Error for an old browser 
     alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera'); 
    } 
    //alert (req); 
    return req; 
} 

//Make the XMLHttpRequest Object 
var http = createRequestObject(); 

function sendRequestTwo(method, url, head1){ 
    head = head1 
    if(method == "get" || method == "GET"){ 
     http.open(method,url); 
     http.onreadystatechange = handleResponseTwo; 
     http.send(null); 

    } 
} 

var head; //divs name 

function handleResponseTwo(){ 
    if(http.readyState == 4 && http.status == 200){ 
     var response = http.responseText; 
     if(response){ 
      document.getElementById(head).innerHTML = response; 
     } 
    }  
}

这部分

  document.getElementById(head).innerHTML = response;

粘贴的结果返回到我的网页。如何显示“加载”在页面完全加载之前？

来源

2012-04-24 Andrew

您可以在sendRequestTwo

来源

2012-04-24 15:13:19

您应确保Ajax响应已正确返回。如果这样的话“document.getElementById（head）.innerHTML = response”将替换“loading”的内容 – 2012-04-24 15:25:53

我不知道你的HTML的细节，但你不能只是加载在标签有id="head"？

然后，当您更新innerHTML时，加载将自动被替换。如果您有更多的要求，请描述。

来源

2012-04-24 15:10:29

这几乎是它是如何完成的，但'响应“需要时间来加载;我如何检查它是否完全加载？ – Andrew 2012-04-24 15:13:43

要查看是否加载了“response”，只需检查“http.readyState == 4”。但我认为你在谈论别的东西。是否还有其他需要在'response' HTML中加载图片的内容？ – 2012-04-24 16:39:23

时间打印加载到元首DIV怎么样有一个div您加载HTML的身体像

<div id="loadingDiv" class="hiddenClass">Fancy rotating image goes here</div>

有一个CSS类，说显示：无;那么你可以前

http.onreadystatechange = handleResponseTwo; 
var myDiv = document.getElementById('loadingDiv'); 
myDiv.className = "showClass";

然后用这个后

document.getElementById(head).innerHTML = response;

添加

var myDiv = document.getElementById('loadingDiv'); 
myDiv.className = "hiddenClass";

总之

function createRequestObject(){ 
    var req; 
    if(window.XMLHttpRequest){ 
     //For Firefox, Safari, Opera 
     req = new XMLHttpRequest(); 
    } 
    else if(window.ActiveXObject){ 
     //For IE 5+ 
     req = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    else{ 
     //Error for an old browser 
     alert('Your browser is not IE 5 or higher, or Firefox or Safari or Opera'); 
    } 
    //alert (req); 
    return req; 
} 

//Make the XMLHttpRequest Object 
var http = createRequestObject(); 

function sendRequestTwo(method, url, head1){ 
    head = head1 
    if(method == "get" || method == "GET"){ 
     var myDiv = document.getElementById('loadingDiv'); 
     myDiv.className = "showClass"; 

     http.open(method,url); 
     http.onreadystatechange = handleResponseTwo; 
     http.send(null); 

    } 
} 

var head; //divs name 

function handleResponseTwo(){ 
    if(http.readyState == 4 && http.status == 200){ 
     var response = http.responseText; 
     if(response){ 
      document.getElementById(head).innerHTML = response; 
      var myDiv = document.getElementById('loadingDiv'); 
      myDiv.className = "hiddenClass"; 
     } 
    }  
}

来源

2012-04-24 15:21:58 Matt

显示LOADING直到页面完全加载

回答

相关问题