0

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

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

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

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

4

2 回答 2

1

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

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

$(window).on('load', function(){
    // your resources are loaded
});
于 2013-08-18T02:18:44.510 回答
1

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

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

这里是关于为什么 .ready() 不是你想要的信息：http:
//api.jquery.com/ready/

这里是信息为什么 .load() （真正的 Javascript 加载事件）是你想要的（它等待要加载的资源）：
http ://api.jquery.com/load-event/

于 2013-08-18T02:24:25.770 回答