7

私は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-activecufon-ready」というクラスが追加されているので、これを確認できます。IE Developerツールバーを使用してマークアップを検査すると、cufon / cufoncanvasタグは選択した要素内にありますが、より適切な言葉を求めて、非表示になっています。

IE9では、スクリプトはChromeやFirefoxと同様に意図したとおりに動作します。Cufon描画エンジンを調整してみましたが、最新の1.09iバージョンに更新しました。非同期でロードするのではなく、Cufon呼び出しステートメントをドキュメント準備完了イベントに移動すると、機能しますが、ページのロードを最適化しようとしています。サイトでは、多数のCufonフォントと他の多くのJSプラグインを使用します。また、labs.jsとhead.jsの両方を使用して、適切なファイルを非同期でロードしようとしました。

4

5 に答える 5

2

電話してみてください

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

</body>タグが閉じる直前。

于 2011-02-08T09:20:31.150 に答える
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も投稿しました）

于 2011-04-13T01:43:45.177 に答える
1

次のようCufon.now()に、呼び出し後に追加してみてください。Cufon.replace

Cufon.replace('h1', { fontFamily: 'Stag Bold' });
Cufon.now();
于 2011-04-29T07:11:18.047 に答える
0

CameraSchoolDropoutのアプローチと同様の方法でこれを解決しましたが、を使用する代わりに、Document.writeIE条件付きタグとYepNope.jsを使用しています。

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>
于 2011-05-11T00:54:08.003 に答える
0

今のところ、通常のタグを使用してjQueryとCufónを<script>ロードし、スクリプトローダーを使用して後続のファイルをロードします。

スクリプトがDOMReadyの前にロード/実行された場合にのみ機能するため、使用document.writeは不適切なアプローチです。ブラウザのスニッフィングを使用して実行すると、誤った結果が生じる可能性があるため、適切なアプローチではありません。

条件付きコメントも、将来スクリプトを更新する必要があり、保守性に悪い2つの異なる場所でスクリプトを更新することを忘れないようにする必要があるため、適切な解決策ではありません。

GitHubでこの問題をフォローして、バグがいつ修正されるかを確認してください。

于 2011-05-20T17:03:43.837 に答える