如何在javascript函数运行之前等待HTML绘制

Question

我正在开发一个涉及使用javascript添加和操作许多html元素的webapp。

这是我的问题的一个例子：

功能1：更改所有500个元素的文本大小

功能2：根据元素350的位置（顶部的像素）滚动到元素＃350。

问题在于，有时css需要时间重新绘制新大小的元素，所以当函数2触发时，它不准确，最终会滚动到错误的位置。

函数1通过使用jquery来改变html头中<style></style>元素的内容。

如何让javascript等待浏览器在开始之前完成绘图而不用任意超时猜测？

Answer 1

您可以在页面加载后通过在其中包含jquery函数来激活jquery：

$(function() {
    //your functions
});

Answer 2

您可以将脚本标记放在页面底部。这可确保您的DOM已加载，并允许用户尽快感知页面！非常好的新闻，特别是如果您的脚本需要花费大量时间来执行，因为您可以在其中放置一个可爱的加载图形作为顶级UX的占位符！ ：）

Answer 3

看一下window.addEventListener("load"纯粹的javascript

function load () {
      alert("Window loaded");
}

window.addEventListener("load", load, false);