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

Page elements are still loading after window.on('load', function() {}) is finished?

本文关键字：元素 加载 on load function window      更新时间：2023-09-26

我想隐藏一个旋转器div一旦所有元素加载并在我的页面上的位置。我在窗口中的旋转器div上放置了一个fadeOut()函数。("负载",…，但我可以看到标签/页面仍在加载，即使元素/资产没有在正确的css位置。我如何强制旋转器div保持直到一切到位，即直到标签上的加载图标完成旋转?

这是我的代码:

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

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

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是DOM中我们通过CSS定位的元素的id。

相关文章：