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

Я создаю сайт, который использует 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 и шрифт cufon загружаются последовательно, а затем, наконец, вызывается Cufon для замены файла H1. Очевидно, что это урезанный пример с меньшим количеством замен, но это все равно не работает, если просто заменить H1.

Проблема в том, что ТОЛЬКО в Internet Explorer (6/7/8) текст не заменяется, но я вижу, что Cufon точно называется. Я могу убедиться в этом, потому что к тегу добавлен класс «cufon-active cufon-ready». Когда я проверяю разметку с помощью панели инструментов разработчика IE, теги cufon/cufoncanvas находятся внутри выбранных элементов, но, если не сказать лучше, невидимы.

В IE9 сценарий ведет себя так же, как и в Chrome и Firefox. Я попытался настроить механизм рисования Cufon и на всякий случай обновил его до последней версии 1.09i. Если я перенесу операторы вызова Cufon в событие готовности документа вместо асинхронной загрузки, это сработает, но я пытаюсь оптимизировать загрузку страницы, и мой сайт будет использовать ряд шрифтов Cufon, а также многие другие подключаемые модули JS. Я также пытался использовать как labs.js, так и head.js для асинхронной загрузки соответствующих файлов.


javascript ajax optimization internet-explorer cufon
person giles    schedule 08.02.2011    source источник
comment
Это отстой, вы должны сообщить об ошибке.   -  person Marko    schedule 08.02.2011
comment
Исправление объединено с основным репозиторием.   -  person Marko Dumic    schedule 11.02.2012

Ответы (5)


arrow_upward
2
arrow_downward

У меня была та же проблема - я решил это, используя обнаружение браузером 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 с более полным примером здесь)

person CameraSchoolDropout    schedule 13.04.2011
comment
я был раним. поскольку это влияет только на cufon, вы все равно можете использовать head.js для jquery и т. д. в части ie, но загружать cufon отдельно или? - person worenga; 21.04.2011
comment
@mightyuhu конечно - в моем сценарии я использую селекторы JQuery с cufon, а затем затухаю в родительском элементе, как только cufon выполняет свою работу. хотя все остальные скрипты, которые у меня есть, загружаются с помощью head.js (хотя я не отразил это в приведенном выше примере) - person CameraSchoolDropout; 22.04.2011

arrow_upward
2
arrow_downward

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

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

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

person Chin    schedule 08.02.2011
comment
Это потенциально вызовет Cufon до того, как он будет загружен сценарием загрузчика: SCRIPT5009: «Cufon» не определено. Я также пытался поместить эту строку сразу после вызова Cufon.replace, но все равно ничего - person giles; 08.02.2011

arrow_upward
1
arrow_downward

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

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

arrow_upward
0
arrow_downward

Я решил это способом, аналогичным подходу 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>
person Kevin C.    schedule 11.05.2011
comment
Оглядываясь назад, я думаю, что я бы предпочел пропустить все это тестирование IE и просто использовать обычные теги ‹script› для jQuery и Cufon. Будем надеяться, что jQuery уже будет кэширован, и загрузка Cufon таким образом блокирует рендеринг страницы, так что текст, отличный от cufon, не мелькает без дополнительных усилий. Мои файлы Cufon весят 240 КБ, как вы думаете, стоит ли дополнительный код для их асинхронной загрузки? - person Kevin C.; 20.05.2011

arrow_upward
0
arrow_downward

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

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

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

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

person Miller Medeiros    schedule 20.05.2011