Question

我希望在所有元素加载并在我的页面上的位置后隐藏一个微调器div。我在window.on（'load'，...，我的spinner div上放了一个fadeOut（）函数，但我可以看到tab / page仍在加载，即使元素/资产不在正确的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。

在window.on（'load'，function（）{}）完成后，页面元素仍在加载？

1 个答案: