javascript - window.on ('load' , function() {}) 完成后页面元素仍在加载？

Question

我想在加载所有元素并在我的页面上就位后隐藏一个微调器 div。我在 window.on('load', ... 中的微调器 div 上放置了一个 fadeOut() 函数，但我可以看到选项卡/页面仍在加载，即使元素/ Assets 尚未处于正确的 css 位置. 如何强制旋转器 div 保持不变，直到一切就绪，即直到选项卡上的加载图标完成旋转？

这是我的代码:

$(window).load(function() {
 $('#spinner').fadeOut();
}

jQuery(document).ready(function($){
 // Append the spinner div.
 $("#spinner").append(spinner.el);
}

Answer 1

听起来您有大量的 CSS，并且浏览器需要很长时间才能在加载页面的所有内容后计算每个元素的样式。您可以使用您的超时想法进行一些实验，并轮询页面上的一个或多个元素以查看计算出的样式何时与预期样式匹配。最后一个要分配计算样式的元素可能会因每次页面加载和/或浏览器而异，因此您肯定需要测试您的方法。下面的示例使用了已接受答案中的一些信息 here为预期样式轮询元素。

var expectedTop="5px";

function ready() {
    $('#spinner').fadeOut();
}

function poll() {
    var o = document.getElementById("pollElementId");
    var comp = o.currentStyle || getComputedStyle(o,null);
    if(comp.top==expectedTop) {
        ready();
    }
    else {
        setTimeout("poll()",500);
    }
}

jQuery(document).ready(function($){
    $("#spinner").append(spinner.el);
    poll();
}

这里的 pollElementId 是我们通过 CSS 定位的 DOM 中元素的 ID。