如何显示谷歌字体加载时加载图像？

我正在使用谷歌字体API。在document.ready中，我请求了谷歌字体集合并使用所有可用的字体系列填充选择列表。现在，当用户从selectlist中选择任何字体时，我只是在要求所选字体的文档中追加链接并显示字体预览。但我试图显示加载图像，而字体加载预览。我的代码：如何显示谷歌字体加载时加载图像？

$("#ff").selectmenu({ select: function() { 
     var img = $("<img />").attr("src", "/images/load.gif"); 
     $(".preview").append(img); 
     $('body').append("<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=" + escape($(this).val()) + "' type='text/css' media='all' />"); 
     $(".preview").css({ fontFamily: $(this).val() }); 
     $(img).remove(); 
    } 
    });

但加载图像未显示，因为可能是链接标记异步请求字体。我怎样才能显示加载图像，直到字体完全加载？

来源

2012-09-13 gaurav

下面是另一篇文章csuwldcat提供的另一个答案。

javascript: capturing load event on LINK

这里的是什么，在我看来，这个问题是使用IMG标签和它的onerror事件更好的解决方案。这种方法将做的工作不循环，做正确扭曲的风格遵守，或在 I帧加载文件，等等。该解决方案火灾时，该文件是加载，并立即如果文件已经被缓存（这是具有讽刺意味的更好与大多数DOM加载事件处理缓存资产的方式相比）。这里是我的博客上的一篇文章，解释了这种方法 - 后巷编码器后 - 我只是厌倦了这一点，没有一个合法的解决方案，享受！
var loadCSS = function(url, callback){ 
var link = document.createElement('link'); 
    link.type = 'text/css'; 
    link.rel = 'stylesheet'; 
    link.href = url; 

document.getElementsByTagName('head')[0].appendChild(link); 

var img = document.createElement('img'); 
    img.onerror = function(){ 
     if(callback) callback(link); 
    } 
    img.src = url; 
}

请投了他的对策，以确保他得到信贷。

来源

2012-09-13 04:31:16

如何显示谷歌字体加载时加载图像？

回答

相关问题