javascript - 异步加载的 Cufon 不会在 IE 中呈现

Question

我正在创建一个使用 Cufon 的网站，由于大量的 Javascript，页面重量特别重。因此，我正在尝试使用 head.js ( http://headjs.com/ ) 异步加载脚本，如下所示:

head.js("http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js", function() {
 head.js("/js/libs/cufon-yui.js", function() {
    head.js("/js/shared/Stag_Bold_700.font.js" , function() {
            Cufon.replace('h1', { fontFamily: 'Stag Bold' });
    });
 });
});

所以先下载Jquery，然后依次下载cufon lib文件和cufon字体，最后调用Cufon替换H1。显然，这是一个精简的示例，替换次数较少，但仅尝试替换 H1 时仍然不起作用。

问题是只有在 Internet Explorer (6/7/8) 中，文本没有被替换，但我可以看到 Cufon 肯定被调用了。我可以确定这一点，因为标签中添加了类“cufon-active cufon-ready”。当我使用 IE Developer 工具栏检查标记时，cufon/cufoncanvas 标签位于所选元素内，但是，用一个更好的词来说，是不可见的。

在 IE9 中，脚本的行为与 Chrome 和 Firefox 类似。我已经尝试调整 Cufon 绘图引擎并已更新到最新的 1.09i 版本以取得良好效果。如果我将 Cufon 调用语句移动到文档就绪事件而不是异步加载，它可以工作，但我正在尝试优化页面加载并且我的站点将使用许多 Cufon 字体以及许多其他 JS 插件。我也尝试过同时使用 labs.js 和 head.js 异步加载适当的文件。

Answer 1

我遇到了同样的问题 - 我通过使用 head.js 的浏览器检测来执行以下操作来解决这个问题:

if (head.browser.mozilla || head.browser.webkit || head.browser.opera ||
        (head.browser.ie && (head.browser.version == '9.0'))) {
        head.js('script/jquery.min.js',
                'script/cufon.js', function () {
                    head.js('script/bebas_neue_400.font.js', function () {
                        Cufon.replace('h1', {
                            textShadow: '1px 1px rgba(0, 0, 0, 0.2)'
                        }).now();
                        // or a head.js('scripts/file.with.cufon.replacement.js');
                    });
                });
            } else {
        // here we load scripts depending on GZIP support for this browser
        document.write('\x3Cscript type="text/javascript" src="script/jquery.min.js">\x3C/script>');
        document.write('\x3Cscript type="text/javascript" src="script/cufon.js">\x3C/script>');
        document.write('\x3Cscript type="text/javascript" src="script/bebas_neue_400.font.js">\x3C/script>');
        document.write('\x3Cscript type="text/javascript" src="script/file.with.cufon.replacement.js">\x3C/script>');            
    }

您还可以使用条件注释(我没有这样做，因为我也在 JavaScript 中进行 GZIP 支持检测，需要调整动态加载的脚本。)

这是一个 hack，但应该足够有用，直到它在库本身中得到解决。

(我还发布了带有更完整示例的 GIST here)