加载字体后，调用jQuery函数. [英] call jQuery function after fonts are loaded.

问题描述

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

I have multiple fonts in web site It loads very slowly,I have some jquery functionality I need to load them when the fonts are loaded.

我试图用

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

不工作该怎么办?

推荐答案

Google字体存在一个问题loader回调/事件是，如果您使用的是jQuery-您可能不希望在加载DOM之前运行事件处理程序-但您不希望在确定所有字体都已运行之前冒着风险运行它加载.

One problem with the Google font loader callbacks/events is that if you're using jQuery - you may not want to run your event handler until the DOM is loaded - but you don't want to risk running it before you're sure all fonts are loaded.

这是我的解决方案.假设:

Here's my solution for that. Assumptions:

• 您正在使用Google字体加载器
• 您只想在加载所有字体，css和DOM之后运行某些东西
• 您可以在字体加载器启动之前先加载jQuery(因为我使用的是$.Callbacks()).

• You've are using the Google Font loader
• You want to run something only after all fonts, css and the DOM are loaded
• You're fine with having jQuery load before the font loader starts (because I'm using $.Callbacks())

这是我在jQuery <script>标记

This is what I do immediately after the jQuery <script> tag

 var activeCallback = $.Callbacks();

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

 // ...

然后是标准的jQuery ready函数

And then a standard jQuery ready function

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

    // other DOM manipulation
 });

每当Google字体加载器完成时，回调都会触发-但是如果文档尚未完成，则直到事件触发时才会触发该事件(这是jQuery

The callback will fire whenever the Google font loader is complete - but if the document is not yet completed the event will not be fired until it has (that's the way jQuery Callbacks work).

这篇关于加载字体后，调用jQuery函数.的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！