jquery - 加载字体后调用 jQuery 函数。

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