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

尝试致电

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

在</body>代码关闭之前

。

Answer 2

我遇到了同样的问题 - 我通过使用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支持检测，需要调整动态加载的脚本。）

这是一个黑客，但应该足够有用，直到它在库本身内解决。

（我还在GIST上发布了一个更完整的例子here）

Answer 3

尝试在Cufon.now()来电后添加Cufon.replace，如下所示：

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

Answer 4

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

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>

Answer 5

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

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

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

关注this issue on GitHub以了解错误修复的时间。

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

5 个答案: