第一次后不显示 Ajax 加载屏幕

Posted 2023-02-19

【中文标题】第一次后不显示 Ajax 加载屏幕

【英文标题】：Ajax loading screen not showing after first time

【发布时间】：2020-06-09 08:57:56

【问题描述】：

我正在使用 AJAX 从我的网页调用 servlet。到目前为止一切都很好，我添加了一些代码来在 servlet 工作时显示加载屏幕，但这只工作第一次，之后，servlet 被调用，我可以更改光标，但等待屏幕不工作

CSS

#loading 
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    opacity: 0.75;
    background-color: #ffffff;
    -webkit-transition: all .5s ease;
    z-index: 3000;
    display:none;
    vertical-align: middle;
    text-align: center;
  
  #loading-img 
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #297bda;
    width: 50px;
    height: 50px;
    margin: auto;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    padding: 2rem;
  

html

<div id="loading">
  <div id="loading-img"></div>
</div>

javascript

$('#compare').click(function() 
//just the relevant part

  $('#loading').show();
....
);

我打电话给

$('#loading').hide();

在.done(函数(数据)中。

正如我所说，代码已执行，但加载屏幕仅在第一次加载。事实上，在尝试解析加载 div 时，我第二次以及更进一步收到 null 。 我也尝试过

       document.getElementById("loading").style.visibility = "hidden";
       document.getElementById("loading").style.display = "none";

而不是使用 hide() 但结果相同。

有什么想法吗？

【问题讨论】：

你想让它工作on loading 吗？

可能加载的 div 在 DOM 中不在它不工作的时候。您是否验证了 html 的来源在加载 div 不工作时是否可用。

我也尝试在准备好的文档中添加这个 $(document).ajaxStop(function () $('#loading').hide(); ); $(document).ajaxStart(functio0n () $('#loading').show(); );但再次只是第一次工作。我试图删除所有隐藏/显示并检查我是否可以获得 div，再次只是第一次返回......但我没有做任何事情来在 ajax 调用中删除它

加载可能永远不会触发，因为内容在第一次加载后被缓存...

【参考方案1】：

找到了！几个小时后，这是我的愚蠢错误。 我得到了这个

<div id="finalresults">
<div>

<div id="loading">
  <div id="loading-img"></div>
</div>

并且正在做 document.getElementById("finalresults").innerHTML = ""; 在 ajax 调用期间，我正在删除正在加载的 div，因为我忘记了前一个 div 中的 /

谢谢大家，真的很抱歉这个错误