call jQuery function after fonts are loaded.

问题

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.

I have tried to call it in

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

not working what to do???

回答1:

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:

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())

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(); }
 };

 // ...

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
 });

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).

回答2:

In order to capture the event, you'll need to use a font loader. Sadly, there isn't a cross-browser way of loading the fonts, so I suggest you try the 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);
})();

回答3:

If you want to control the loading process of @font-faces use WebFont Loader, developed by Google and Typekit.

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

来源：https://stackoverflow.com/questions/11941883/call-jquery-function-after-fonts-are-loaded

标签

jquery

load