Question

我有一段代码想要在页面准备好后立即跳转到页面上的特定ID。我通过执行jquery.animate()来完成此操作，以便scrollTop位于我的目标元素。

但是，我正在使用网络字体，由于某些原因，{<1}}事件在加载并应用了网络字体之前触发。结果是动画结束的位置通常与我想要滚动的元素的实际位置完全无关。

我已经通过在Chrome检查器中打开时间轴来验证了这一点，我在其中看到动画触发，然后是网络字体加载，然后是重新渲染，这会导致我的动画目标滚动点变得毫无意义。我还确认，当我使用系统字体时，这个问题不会出现。

有人可以提供一些建议吗？也许在应用Web字体后会发生某种事件？

Answer 1

浏览器完成下载页面的整个 HTML 后会触发

$(document).ready(...)。它通常在浏览器完成下载样式表之前，更不用说字体文件了。

假设它是从HTML中包含的样式表加载的（而不是JavaScript添加的样式表），您应该监听窗口事件，而不是文档的加载事件。

$(window).on('load', function(){
    // your resources are loaded
});

Answer 2

尝试使用.load，因为.ready仅在加载DOM之后。

$(window).load(function () {
  // run code
});

以下是关于为什么.ready（）不是你想要的信息：
http://api.jquery.com/ready/

这里是为什么.load（）（实际上是Javascript加载事件）是你想要的（它等待加载资源）：
http://api.jquery.com/load-event/