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

Question

I'm creating a site which uses Cufon and is particularly heavy in terms of page-weight due to a large amount of Javascript. 我正在创建一个使用Cufon的网站，由于大量的Javascript，在页面权重方面特别重。 Therefore I'm trying to load in the script asynchronously with head.js ( http://headjs.com/ ) like so: 因此，我正在尝试与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' });
    });
 });
});

So Jquery is downloaded first, the subsequent cufon lib file and cufon font are downloaded in sequence and then Cufon is finally called to replace the H1. 因此首先下载Jquery，然后按顺序下载随后的cufon lib文件和cufon字体，然后最终调用Cufon来替换H1。 Obviously, this is a trimmed down example with fewer replacements but this still doesn't work when just attempting to replace the H1. 显然，这是一个精简的示例，更换次数较少，但仅在尝试更换H1时仍然无效。

The problem is that ONLY in Internet Explorer (6/7/8), the text is not replaced but I can see that Cufon has definitely been called. 问题是，仅在Internet Explorer（6/7/8）中，文本没有被替换，但我可以看到Cufon肯定被称为。 I can ascertain this because the tag has the class "cufon-active cufon-ready" added to it. 我可以确定这一点，因为标签中添加了“cufon-active cufon-ready”类。 When I inspect the markup using the IE Developer toolbar, the cufon/cufoncanvas tags are there inside the selected elements but are, for want of a better word, invisible. 当我使用IE Developer工具栏检查标记时，cufon / cufoncanvas标记位于所选元素内部，但是由于缺少更好的单词，它们是不可见的。

In IE9, the script behaves as intended similar to Chrome and Firefox. 在IE9中，脚本的行为与Chrome和Firefox类似。 I have tried adjusting the Cufon drawing engine and have updated to the latest 1.09i version for good measure. 我已经尝试调整Cufon绘图引擎并更新到最新的1.09i版本以获得良好的衡量标准。 If I move the Cufon calling statements to the document ready event instead of loading asynchronously, it works but I am trying to optimize page load and my site will be using a number of Cufon fonts as well as many other JS plug-ins. 如果我将Cufon调用语句移动到文档就绪事件而不是异步加载，它可以工作，但我正在尝试优化页面加载，我的网站将使用许多Cufon字体以及许多其他JS插件。 I've also tried using both labs.js and head.js to load the appropriate files asynchronously. 我也尝试使用labs.js和head.js来异步加载适当的文件。

Answer 1

try calling 试着打电话

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

just before </body> tag closes. 就在</body>标签关闭之前。

Answer 2

I had the same problem - I addressed this by using the browser detection of head.js to do the following: 我有同样的问题 - 我通过使用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>');            
    }

You could also use conditional comments (I didn't because I am also doing GZIP support detection in JavaScript and needed to adjust the scripts which are loaded dynamically.) 你也可以使用条件注释（我没有，因为我也在JavaScript中进行GZIP支持检测，需要调整动态加载的脚本。）

It's a hack, but should be useful enough until it's addressed within the library itself. 这是一个黑客，但应该足够有用，直到它在库本身内解决。

(I have also posted GIST with a more complete example here ) （我还贴有GIST一个更完整的例子在这里）

Answer 3

Try adding Cufon.now() after the Cufon.replace call, like so: 尝试在Cufon.replace调用之后添加Cufon.now() ，如下所示：

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

Answer 4

I solved this in a way similar to CameraSchoolDropout's approach, except instead of using Document.write , I'm using IE conditional tags, and YepNope.js . 我以类似于CameraSchoolDropout的方法解决了这个问题，除了使用Document.write ，我使用IE条件标签和YepNope.js 。

This issue on github says that they had problems using document.createElement('script') , and I just felt better using IE conditionals. github上的这个问题说他们在使用document.createElement('script')遇到了问题，我觉得使用IE条件更好。

You can see an example page that I created at http://epraxadev.com/yepnope/ 您可以在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

For now just load jQuery and Cufón using regular <script> tags and load the subsequent files using a script loader. 现在只需使用常规<script>标记加载jQuery和Cufón，然后使用脚本加载器加载后续文件。

Using document.write is a bad approach since it will only work if the script is loaded/executed before DOMReady and using browser sniffing to do it isn't a good approach either since it can give false results. 使用document.write是一种糟糕的方法，因为它只有在DOMReady之前加载/执行脚本并且使用浏览器嗅探来执行它时才有效，因为它可能会产生错误的结果。

Conditional comments aren't a good solution either because you may need to update the scripts in the future and you will have to remember to update it in 2 different places which is bad for maintainability. 条件注释不是一个好的解决方案，因为您可能需要在将来更新脚本，并且您必须记住在两个不同的地方更新它，这对可维护性是不利的。

Follow this issue on GitHub to know when the bug is fixed. 在GitHub上关注此问题以了解错误修复的时间。

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

问题描述

5 个解决方案

解决方案1
2 2011-02-08 09:20:31

解决方案2
2 已采纳 2011-04-13 01:43:45

解决方案3
1 2011-04-29 07:11:18

解决方案4
0 2011-05-11 00:54:08

解决方案5
0 2011-05-20 17:03:43

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

问题描述

5 个解决方案

解决方案1 2 2011-02-08 09:20:31

解决方案2 2 已采纳 2011-04-13 01:43:45

解决方案3 1 2011-04-29 07:11:18

解决方案4 0 2011-05-11 00:54:08

解决方案5 0 2011-05-20 17:03:43

解决方案1
2 2011-02-08 09:20:31

解决方案2
2 已采纳 2011-04-13 01:43:45

解决方案3
1 2011-04-29 07:11:18

解决方案4
0 2011-05-11 00:54:08

解决方案5
0 2011-05-20 17:03:43