外部字体完全加载后执行JavaScript

时间:2013-01-04 01:27:01

标签: javascript

我正在使用Google字体,我在$(窗口)内部有代码.load(function(){...有一些文字说“正在加载...”在执行$内部代码之前,所有内容都在页面上呈现(window).load(function(){除了具有CSS属性字体的文本以使用Google字体。

我怎样才能克服这个?

1 个答案:

答案 0 :(得分:1)

您可以进行非异步(同步?)AJAX调用以确保下载字体:

xmlhttp.open('GET','path/to/needed/font',false);

这将满足您的要求。但是,老实说,这不是最好的用户体验。我建议制作一个“加载”文本的微小SVG图像,只显示该图像。 SVG很不错,因为您可以在HTML中包含代码,以便您知道它已下载。

如果您因任何原因无法使用SVG或只是偏好JPG或PNG,您可以将图像数据嵌入页面:Embedding Base64 Images

最后,如果您不关心Internet Explorer,并且您确实不想使用图片,那么我想您可以将数据网址放入{{1} } src。例如:http://robert.accettura.com/blog/2009/07/03/optimizing-font-face-for-performance/