我的页面中的资源加载速度太慢

Question

我有一个网页，页面上有一些jQuery根据放在其中的文本执行div的大小调整（读取更多/读取更少）。

我使用的是自定义本地字体，90％的时间它工作正常，但有时则超出估算所需的空间。

使用调试器我发现只有在页面显示我正在使用的任何字体或图标（在我的资源文件夹中）之前执行脚本时才会发生这种情况。 Chrome调试器显示渲染的字体是“DejaVu Sans”。我假设它使用此计数来执行jQuery，之后它用我的自定义字体替换字体。

我想这是字体方面的某种加载时间问题，因为它与缓存不一致。但我能在这做什么呢？有没有办法在dom准备好之前确保资源已加载并可用？

Answer 1

我已经有一段时间了，但你必须使用http://www.fontsquirrel.com/tools/webfont-generator进行优化 如果您在https://www.google.com/fonts上使用字体而不是使用

Answer 2

$().ready()和朋友将在解析DOM后立即运行;它不会等到图像和样式表和东西被加载。您可能想要查看JS本地load事件。来自MDN文档：

  

当资源及其相关资源完成加载时会触发load事件。

所以，这样的事情应该有效：

<script>
  document.addEventListener("load", function(event) {
    console.log("DOM, images, stylesheets etc. all present");
  });
</script>

Answer 3

这只是在加载字体之前运行JQuery的问题。 我使用了Web Font Loader自定义模块（因为我的字体不是google或font squirrel）和回调来解决这个问题。