Question

我使用的是google fonts api。在document.ready中，我请求了google fonts集合，并使用所有可用的字体系列填充选择列表。现在，当用户从选择列表中选择任何字体时，我只需在文档中附加请求所选字体的链接并显示字体预览。但我正在尝试显示加载图像，同时加载字体进行预览。我的代码：

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

但是加载图像没有显示，因为链接标签可能是异步请求字体。如何在字体完全加载之前显示加载图像？

Answer 1

以下是csuwldcat在另一篇文章中提供的另一个答案。

javascript: capturing load event on LINK

在我看来，对于这个问题，这是一个更好的解决方案使用IMG标记及其onerror事件。这种方法可以完成这项工作没有循环，做扭曲的样式遵守，或加载文件 iframes等。当文件加载时，此解决方案正确触发，如果文件已经缓存，那就马上就行了（具有讽刺意味的是比大多数DOM加载事件处理缓存资产的方式更好。这是一个在我的博客上发布解释方法 - Back Alley Coder post-I 只是厌倦了没有合法的解决方案，享受！
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; 
}

请对他的回复进行投票，确保他获得信誉。

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

1 个答案: