异步加载的 Cufon 不会在 IE 中呈现答案

【问题标题】：Cufon loaded asynchronously doesn't render in IE异步加载的 Cufon 不会在 IE 中呈现
【发布时间】：2011-06-23 07:17:57
【问题描述】：

我正在创建一个使用 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 来异步加载适当的文件。

【问题讨论】：

太糟糕了，你应该提交一个错误。
将merged 修复到主存储库中。

标签： javascript ajax internet-explorer optimization cufon

【解决方案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>');            
    }

您也可以使用条件 cmets（我没有使用，因为我也在 JavaScript 中进行 GZIP 支持检测，并且需要调整动态加载的脚本。）

这是一个 hack，但在库本身解决之前应该足够有用。

（我还发布了带有更完整示例的 GIST here）

【讨论】：

我很受伤。因为它只影响 cufon 你仍然可以在 ie 部分中将 head.js 用于 jquery 等，但单独加载 cufon 还是？
@mightyuhu 当然 - 在我的场景中，我使用带有 cufon 的 JQuery 选择器，然后在 cufon 完成工作后在父元素上淡入淡出。尽管我所拥有的任何剩余脚本都加载了 head.js（尽管我没有在上面的示例中反映这一点）

【解决方案2】：

试着打电话

 <script type="text/javascript"> Cufon.now(); </script>

就在</body>标签关闭之前。

【讨论】：

这可能会在有机会被加载程序脚本下载之前调用 Cufon： SCRIPT5009: 'Cufon' 未定义。我也尝试在 Cufon.replace 调用之后立即放置这条线，但仍然没有

【解决方案3】：

尝试在Cufon.replace 调用之后添加Cufon.now()，如下所示：

Cufon.replace('h1', { fontFamily: 'Stag Bold' });
Cufon.now();

【讨论】：

【解决方案4】：

我以类似于 CameraSchoolDropout 的方法解决了这个问题，除了我使用的是 IE 条件标签和YepNope.js 而不是使用Document.write。

This issue on github 说他们在使用 document.createElement('script') 时遇到了问题，我只是觉得使用 IE 条件更好。

你可以看到我在http://epraxadev.com/yepnope/创建的示例页面

<head>

<style type="text/css">
#txt    { visibility:hidden; }
</style>

<!--[if lte IE 8]>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="js/cufon-yui.js"></script>
<script src="js/adventor.cufon.js"></script>
<![endif]-->

<script src="js/modernizr.custom.js"></script>
<script>
yepnope([{
    test: window.jQuery,
    nope: {
        'yJ': '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js',
        'yCufon': 'js/cufon-yui.js',
        'yFont': 'js/museo.font.js'
    },
    callback: {
        'yJ': function(){
            console.log("YepNope loaded jQuery! This isn't IE!");
        }
    },
    complete: function() {
        console.log('All browsers, including IE, will show this');

        Cufon.replace('h1');

        $(document).ready(function(){
            $('#txt').css('visibility', 'visible');
        });
    }
}]);
</script>

<noscript>
    <style type="text/css">
    #txt { visibility:visible; }
    </style>
</noscript>

</head>

【讨论】：

回想起来，我想我宁愿跳过整个 IE 测试，只对 jQuery 和 Cufon 使用普通的

【解决方案5】：

现在只需使用常规的<script> 标签加载 jQuery 和 Cufón，然后使用脚本加载器加载后续文件。

使用document.write 是一种不好的方法，因为它仅在脚本在 DOMReady 之前加载/执行时才有效，并且使用浏览器嗅探来执行它也不是一种好方法，因为它可能会给出错误的结果。

条件 cmets 也不是一个好的解决方案，因为您将来可能需要更新脚本，并且您必须记住在 2 个不同的地方更新它，这不利于可维护性。

关注this issue on GitHub 了解何时修复该错误。

【讨论】：