异步加载的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 和更完整的示例）