Cufon загружается асинхронно, не рендерится в IE - PullRequest
Новая
       10

Cufon загружается асинхронно, не рендерится в IE

7 голосов
/ 08 февраля 2011

Я создаю сайт, который использует 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, последующие файлы lib cufon и шрифт 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 для асинхронной загрузки соответствующих файлов.

Ответы [ 5 ]

2 голосов
/ 13 апреля 2011

У меня была та же проблема - я решил эту проблему с помощью обнаружения 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>');            
    }

Вы также можете использовать условные комментарии (я этого не сделал, потому что я также делаю обнаружение поддержки GZIP в JavaScript и мне нужно было настроить скрипты, которые загружаются динамически.)

Это хак, но он должен быть достаточно полезен, пока не будет решен внутри самой библиотеки.

(я также разместил GIST с более полным примером здесь )

2 голосов
/ 08 февраля 2011

попробуйте позвонить 

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

непосредственно перед закрытием тега </body>.

1 голос
/ 29 апреля 2011

Попробуйте добавить Cufon.now() после вызова Cufon.replace, например: 

Cufon.replace('h1', { fontFamily: 'Stag Bold' });
Cufon.now();
0 голосов
/ 20 мая 2011

Пока просто загрузите jQuery и Cufón, используя обычные теги <script>, и загрузите последующие файлы с помощью загрузчика скриптов.

Использование document.write - плохой подход, поскольку он будет работать только в том случае, если скрипт загружен/ выполняется перед DOMReady и использует перехват браузера для этого тоже не очень хороший подход, поскольку он может давать ложные результаты.

Условные комментарии также не являются хорошим решением, поскольку вам может потребоваться обновить сценарии вбудущее, и вам придется помнить, что нужно обновлять его в 2 разных местах, что плохо для удобства обслуживания.

Следуйте этой проблеме на GitHub , чтобы знать, когда ошибка устранена.

0 голосов
/ 11 мая 2011

Я решил эту проблему аналогично подходу CameraSchoolDropout, за исключением того, что вместо использования Document.write я использую условные теги IE и 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>
...