Fatal编程技术网
  • javascript/
  • Javascript 加载字体面之前触发window.onload

Javascript 加载字体面之前触发window.onload

javascript html css safari

Javascript 加载字体面之前触发window.onload,javascript,html,css,safari,font-face,Javascript,Html,Css,Safari,Font Face,以下网页加载Font Awesome，显示图标fa check，并在窗口上有一个调试器断点。onload： <!DOCTYPE html> <html> <head> <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'> <script> wind

以下网页加载Font Awesome，显示图标
fa check
，并在
窗口上有一个
调试器
断点。onload
：

<!DOCTYPE html>
<html>
  <head>
    <link rel='stylesheet' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css'>

    <script>
      window.onload = function () {
        debugger;
      };
    </script>
  </head>

  <body>
    <div class='fa fa-check fa-4x'></div>
  </body>
</html>


window.onload=函数（）{
调试器；
};
在Chrome（控制台打开）上，在呈现图标后会命中断点。这是预期的行为

在Safari（控制台打开）上，在呈现图标之前会命中断点。我想这是一个狩猎虫

我如何保证在Safari上呈现图标后会触发
window.onload
。

不幸的是，准确确定字体在页面上的加载时间是一个非常困难的问题，尤其是当您必须支持多个浏览器/设备时。上次我做调查时，并没有什么灵丹妙药，但很多人都写了他们的方法。请参阅和。

您可以检查字体加载状态，使用该状态返回您可以解析的承诺，然后使用（…）：

它被认为是“实验性的”，请参见此处支持的浏览器：

我实际上只对Safari感兴趣，因为我正在开发一款iOS应用程序，其中包含
UIWebView
。 
document.fonts.ready.then(function() {
  // Any operation that needs to be done only after all the fonts
  // have finished loading can go here.
});