Question

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

我试图在

中调用它

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

不工作怎么做???

Answer 1

Google font loader callbacks/events的一个问题是，如果你正在使用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 Callbacks的工作方式）。

Answer 2

为了捕获事件，您需要使用字体加载器。遗憾的是，没有跨浏览器加载字体的方式，所以我建议你试试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);
})();

Answer 3

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

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

加载字体后调用jQuery函数。

3 个答案: