8

我在网站上有多种字体它加载非常缓慢，我有一些 jquery 功能，我需要在加载字体时加载它们。

我试图调用它

jQuery(window).load(function () { 
 //my_function()
});

不工作怎么办？？？

4

3 回答 3

13

Google 字体加载器回调/事件的一个问题是，如果您使用的是 jQuery——您可能不想在加载 DOM 之前运行事件处理程序——但您不想在确定所有内容之前冒险运行它字体已加载。

这是我的解决方案。假设：

  • 您正在使用 Google 字体加载器
  • 您只想在加载所有字体、css 和 DOM 后运行某些东西
  • 在字体加载器启动之前加载 jQuery 没问题（因为我正在使用$.Callbacks()）

这就是我在 jQuery<script>标记之后立即执行的操作

 var activeCallback = $.Callbacks();

 WebFontConfig = {
     google: { families: ['Open+Sans:400italic,400,300,600:latin'] },
     active: function () { activeCallback.fire(); }
 };

 // ...

然后是一个标准的 jQuery 就绪函数

 $(function() 
 {
    // start slide show when all fonts are loaded (need to calculate heights)
    activeCallback.add(function ()
    {
        startSlideshow();
    });

    // other DOM manipulation
 });

只要 Google 字体加载器完成，回调就会触发 - 但如果文档尚未完成，事件将不会被触发，直到它完成（这就是 jQuery回调的工作方式）。

于 2013-03-20T01:51:55.393 回答
1

为了捕获事件，您需要使用字体加载器。遗憾的是，没有跨浏览器加载字体的方式，所以我建议你试试Google WebFont Loader：

var WebFontConfig = {
  monotype: {  // Fonts.com 
    projectId: 'YourProjectId'
  },
  active: function() {
    // do something
  }
};

(function() {
  var wf = document.createElement('script');
  wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
  wf.type = 'text/javascript';
  wf.async = 'true';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(wf, s);
})();
于 2012-08-13T20:41:38.280 回答
0

如果你想控制@font-faces 的加载过程，请使用由 Google 和 Typekit 开发的 WebFont Loader。

https://developers.google.com/webfonts/docs/webfont_loader

于 2012-08-13T20:39:58.467 回答