如何用jQuery正确显示隐藏加载动画？现有方法失效求助

首先，你的代码里有一个关键的异步操作顺序错误，这才是导致加载动画没按预期生效的核心原因，我们先解决这个问题，再聊CSS伪类的潜在影响。

1. 异步请求的顺序问题 #

你当前的代码逻辑存在明显的异步执行漏洞：

$('.loading').show();
$.getJSON('/json.php?prefetch', function(data) {
  // json sorting here.
});
$('.loading').hide();

因为$.getJSON是异步请求，它不会阻塞后续代码的执行——也就是说，你刚调用show()，浏览器还没来得及渲染出加载动画，hide()就已经执行了，所以视觉上根本看不到加载效果。

正确的做法是把hide()放在getJSON的成功回调函数里，等数据请求完成后再隐藏动画：

document.onscroll = function() {
  if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight) {
    $('.loading').show();
    $.getJSON('/json.php?prefetch', function(data) {
      // json sorting here.
      // 等请求完成后再隐藏加载动画
      $('.loading').hide();
    });
  }
}

2. 关于CSS伪类的潜在影响 #

你提到的:not和:before伪类，结合那个加载动画的实现逻辑来看：它是通过给.loading元素添加:before伪元素来生成动画效果的。如果你的.loading元素本身是空的，部分浏览器可能对display: none的元素不渲染伪元素，但只要确保调用show()时元素处于display: block（或其他非none状态），伪元素就会正常显示。

如果你的CSS里有类似.loading:not(:empty):before这类规则，那当.loading元素内容为空时，伪元素不会生效。这种情况下，你可以给.loading添加一个空文本节点（比如<div class="loading">&nbsp;</div>），或者调整CSS规则去掉:not(:empty)的限制，确保伪元素在元素显示时就能正常渲染。

额外优化建议 #

为了避免滚动时多次触发加载逻辑，建议添加一个加载状态标记：

let isLoading = false; // 标记是否正在加载，防止重复请求
document.onscroll = function() {
  if(!isLoading && document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight) {
    isLoading = true;
    $('.loading').show();
    $.getJSON('/json.php?prefetch', function(data) {
      // json sorting here.
      $('.loading').hide();
      isLoading = false;
    }).fail(function() {
      // 请求失败也要重置标记、隐藏动画
      $('.loading').hide();
      isLoading = false;
    });
  }
}

这个标记能防止用户快速滚动时多次触发请求，同时避免加载动画被反复触发显示/隐藏。

内容的提问来源于stack exchange，提问作者stuckffslol