加载字体后调用jQuery函数.

Question

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

我试着打电话给它

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

不工作怎么办???

Answer 1

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 Callbacks的工作方式).

Answer 2

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

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