javascript - Web 字体加载的事件处理程序？

Question

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

但是，我使用的是网络字体，由于某种原因 ready 事件在网络字体加载和应用之前 触发。结果是动画结束的位置通常与我要滚动到的元素的实际位置完全无关。

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

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

Answer 1

$(document).ready(...) 在浏览器完成下载页面的整个 HTML 时触发。通常是在浏览器完成样式表下载之前，更不用说字体文件了。

---

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

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