加载字体后,调用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屋!