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

How to show a loading image while google font loading?

本文关键字：加载 图像 显示 字体 谷歌      更新时间：2023-09-26

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

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

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

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

javascript:捕获LINK 上的加载事件

在我看来，以下是解决这个问题的更好方案使用IMG标记及其oneror事件。这种方法可以完成任务不循环，不执行扭曲的风格遵守，也不在中加载文件iframe等。该解决方案在加载文件时正确启动，如果文件已经缓存（具有讽刺意味的是比大多数DOM加载事件如何处理缓存的资产要好）。这是一个在我的博客上发布解释方法的帖子-Back Alley Coder帖子-我只是厌倦了没有合法的解决方案，享受吧！

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;

}

请投票支持他的回应，确保他得到赞扬。

相关文章：