Question

这是我的代码。我正在尝试插入一个图像来显示ajax正在加载，但我无法做到这一点;我尝试了很多可能的方法，但它只是不起作用。关于该怎么做的任何建议？

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        var ajaxDisplay = document.getElementById('main_result');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }
}
$("#main_result").empty().html('<img src="loading.gif" />');

var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;
var queryString = "&category=" + category + "&brand="+ brand +"&item="+ item;
ajaxRequest.open("GET", "main_search_special.php?section=special" + queryString, true);
ajaxRequest.send(null);

Answer 1

你可以通过几种不同的方式来解决这个问题，你可以

预先加载图片并在发送请求时创建元素，并在完成后将其销毁
将其与文档一起创建，然后隐藏它直到发送请求，然后在完成后再次隐藏
两者的结合：在javascript中预加载和创建元素，从那里只需隐藏/显示每个请求/完成时的元素。

#1当请求很少发送时，可能是最优选的，因为它不会干扰文档的负载，而是在完成其他所有操作后加载。由于创建/销毁元素比简单地隐藏/显示元素需要更多的处理时间，因此这不是推荐的方法。

#2在频繁发送请求时首选，因为您将经常使用加载程序映像，因此无需创建/销毁它，只需从一开始就可以使用它。我推荐这种方法。

#3当您想要安全地玩时，首选。在页面加载完成之前，这不会加载图像，只需要很少的处理时间。

Example #1 |代码

HTML

<div id='content'></div>

Javascript

var PreloadIt = new Image(441,291);
PreloadIt.src="loader.gif";

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById('content').removeChild(document.getElementById('ajaxloader'));
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    var eLoader = document.createElement("img");

    eLoader.src = "loader.gif";
    eLoader.alt = "";
    eLoader.id = "ajaxloader";

    document.getElementById('content').appendChild(eLoader);

    http.send(params);
}

BeginLoading();

Example #2 |代码

HTML

<div id='content'>
    <div id='ajaxloader'><img src="loader.gif" style="display: none"/></div>
</div>

的Javascript

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        document.getElementById('ajaxloader').style.display = "none";
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    document.getElementById('ajaxloader').style.display = "block";
    http.send(params);
}

BeginLoading();

Example #3 |代码

HTML

<div id='content'></div>

的Javascript

function CreateLoader(){
    var img = document.createElement("img");
    img.id = "ajaxloader";
    img.src = "loader.gif";
    img.alt = "";

    document.getElementById("content").appendChild(img);

    img.show = function(){ img.style.display = "block"; }
    img.hide = function(){ img.style.display = "none"; }

    img.hide();        

    return img;        
}

var eLoader = CreateLoader();

var http = new XMLHttpRequest();
var url = "thepage.php";
var params = "whatever=you&want=in+here";

http.open("POST", url, true);

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        eLoader.hide();
        document.getElementById('content').innerHTML = http.responseText
    }
}

function BeginLoading(){
    eLoader.show();
    http.send(params);
}

BeginLoading();

其它

我建议跟踪返回的状态。当请求失败时，您的代码将返回错误，因为您没有处理它。确保请求成功并处理您的错误。

如果你有包含特殊字符的数据，比如空格等，你也应该考虑使用encodeURIComponent()。

var category = document.getElementById('category').value;
var brand = document.getElementById('brand').value;
var item = document.getElementById('item').value;

var url = "main_search_special.php"
var parameters = "section=special&category=" + encodeURIComponent(category) + "&brand=" + encodeURIComponent(brand) + "&item=" + encodeURIComponent(item);

ajaxRequest.open("GET", url+"?"+parameters, true);

ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4 && http.status == 200){
        var ajaxDisplay = document.getElementById('main_result');
        ajaxDisplay.innerHTML = ajaxRequest.responseText;
    }else{
        console.log("Request for \""+url+ "\" failed.");
    }
}

ajaxRequest.send();

Answer 2

在发送请求之前，只需将图像添加到显示区域即可。结果将在请求完成时覆盖它。

...
var ajaxDisplay = document.getElementById("main_result");
ajaxDisplay.innerHTML = "<img src='loading.gif' />"
ajaxRequest.send(null);

Answer 3

我建议将返回操作放入自己的函数中，使其看起来更清晰

但是你要做的就是添加图片：

在你发送之前（基本上在函数的任何地方），创建图像元素并附加到你喜欢的HTML中的任何元素

当您从ajax调用返回时，删除图像元素。

Answer 4

这是你可以做的 - 在你最喜欢的位置设置一个图像。使它隐藏的可见性。在调用php之前使其可见性可见，再次从php文件响应后，你可以使你的图像隐藏可见性。这是你可以做到这一点的方法之一，还有其他方法。

search.onclick = function()
{
  var ajaxRequest;
  document.getElementById("image_loading").style.visibility = "visible";
  ajaxRequest.onreadystatechange = function(){
  if(ajaxRequest.readyState == 4){
    document.getElementById("image_loading").style.visibility = "hidden";                
    var ajaxDisplay = document.getElementById('main_result');
    ajaxDisplay.innerHTML = ajaxRequest.responseText;
  }
}
  $("#main_result").empty().html('<img src="loading.gif" />');
  var category = document.getElementById('category').value;
  var brand = document.getElementById('brand').value;
  var item = document.getElementById('item').value;
  var queryString = "&category=" + category + "&brand="+ brand +"&item="+ item;
  ajaxRequest.open("GET", "main_search_special.php?section=special" + queryString, true);
  ajaxRequest.send(null);
}

在ajax加载时创建加载图像

4 个答案:

Example #1 |代码

Example #2 |代码

Example #3 |代码

其它