1

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

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

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

4

1 回答 1

1

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

javascript：在 LINK 上捕获加载事件

在我看来，这是使用 IMG 标签及其 onerror 事件的更好解决方案。此方法将在不循环、执行扭曲样式观察或在 iframe 中加载文件等情况下完成工作。此解决方案在文件加载时正确触发，如果文件已被缓存则立即触发（具有讽刺意味的是，这比大多数 DOM load 事件处理缓存的资产）。这是我博客上的一篇文章，解释了该方法 - 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;

}

请投票支持他的回应，以确保他得到信任。

于 2012-09-13T04:31:16.693 回答