加载字体后调用jQuery函数。

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

我试着打电话给它

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

不工作怎么办???

Answer 1

Google字体加载器回调/事件的一个问题是，如果你正在使用jQuery – 你可能不希望在加载DOM之前运行你的事件处理程序 – 但你不想冒险运行它之前你确定所有字体已加载。

这是我的解决方案。 假设：

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

这是我在jQuery 标记之后立即执行的操作

  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