Мерцание шрифта, когда новые css файлы динамически загружаются

Я использую загрузчик Google Webfont для загрузки моих веб-сайтов с обратным вызовом, и он работает нормально.

Хотя, когда несколько компонентов: кнопка Google +1, щель для поиска в Twitter и кнопка "Добавить эту кнопку" загружаются, они добавляют новую таблицу стилей в DOM и заставляют браузер снова отображать сайт. Это вызывает исчезновение шрифта, а затем отображает для каждой новой таблицы стилей, добавленной в dom.

Я мог бы скрыть шрифт полностью до тех пор, пока компоненты не будут загружены, но они, как правило, довольно медленные, так что это оставит меня с довольно плохим пользовательским интерфейсом. Около 1 секунды сайта без заголовка.

Энди рассказывает о том, как заставить шрифт не перерисовывать или как блокировать динамически загружаемый CSS из встроенных скриптов Google, Twitter и FB?

Обновление: демо здесь http://kristoferforsell.com/dev/fontexample/

Ответы

Ответ 1

В настоящее время это является неотъемлемой проблемой для браузеров и свойства @font-face. Мигает, когда шрифт загружен и страница обновляется, чтобы отобразить шрифт. Если вы хотите полностью удалить "мигание", единственным верным способом является включение шрифта в URI данных в таблицу стилей. Разумеется, использование стандартных "безопасных" шрифтов также устранит мигание.

URI данных позволяют фактически вставлять код для шрифта в таблицу стилей, чтобы не мигать, когда страница обновляется, чтобы показать нужный шрифт. Использование URI данных, очевидно, увеличит размер файла (kb) любой таблицы стилей.

Онлайн-конвертер для получения кода base64 можно найти здесь

Использование для @font-face будет таким же.....

 @font-face {
font-family: "My Font";
src: url("data:font/opentype;base64,[   the base64 code here   ]");
}

Ответ 2

Не уверен, что это исправит вашу проблему, но вы можете использовать css, чтобы установить видимость скрытых элементов до тех пор, пока не будет загружен font. Google API предоставляет классы wf-loading и wf-active, которые добавляются в тело для решения этой проблемы.

Я всегда настраивал отдельную таблицу стилей только для правила @font-face, и внутри нее были введены следующие правила, где replace - это класс заменяемого элемента, для вас это будет просто p.

.wf-loading .replace { visibility: hidden;}

У вас будет

.wf-loading p { visibility: hidden;}

Затем, как только Webfont загружается, JS помещает класс wf-active в тело, и ваш текст появляется. Дайте мне знать, как это происходит, и если у вас есть какие-то проблемы, просто напишите мне. Возможно, стоит также попытаться найти "вспышку несвязанного контента" или "вспышку незакрепленного текста", поскольку это хорошо известная и хорошо документированная ошибка.

Ответ 3

Я могу предложить простой и грязный трюк, который я использовал для решения таких проблем. Если вы реализуете это, со стороны пользователя эффект будет заключаться в том, что вся страница будет загружаться сразу (с правильными веб-шрифтами), но после задержки. После загрузки ничего не мерцает или не меняется. Оберните содержимое всей страницы в div и установите ее видимость на скрытую. Затем используйте js, чтобы включить видимость, когда загружается целая страница (таблицы стилей и все). Здесь код:

<head>
<script>
function show()
{document.getElementById('wrapper').style.visibility='visible';}
</script>
</head>
<body onload="show()">
<div id="wrapper">
...your entire page contents...
</div>
</body>

onload гарантирует, что видимость включается только после загрузки всего тела. Хотя я не использовал веб-шрифты, я использую этот трюк, чтобы полностью исчезнуть во всем содержимом этот сайт без каких-либо изменений или обновления после этого. Но да, будет задержка до того, как появится вся страница.

EDIT: Я добавил веб-шрифты Google на сайт, который я связал. Все еще прекрасно работает. Нет мерцания шрифта.

Ответ 4

Это выстрел в темноте, поскольку я его не тестировал: Не могли бы вы создать еще одну html-страницу только с этими кнопками социальных сетей, а затем загрузить ее в iframe? Затем установите только src в iframe, как только документ будет полностью загружен, поэтому он ничего не держит.

В html:

<iframe id="socialMedia"></iframe>

В script:

$(document).ready(function() {
   $('#socialMedia').src = "http://mysite.com/mysocialmediastrip.html";
});

Где mysocialmediastrip.html содержит все кнопки социальных сетей. Установка src приведет к тому, что iframe перезагрузит и потянет этот контент, но IIRC, остальная часть страницы останется в покое - все рендеринг кнопок будет выполнен в mysocialmediastrip.html, а не на главной странице.

Ответ 5

Я полностью понимаю, что вы говорите о процессе задержки, ожидая, пока загрузится окно, прежде чем вы действительно покажете свои товары. Абхранил дал хорошее решение, но вы можете принять его решение дальше. Вы можете использовать jQuery ajax для загрузки определенного содержимого страницы, используя специальный тип шрифта. Зачем? потому что ajax поставляется со специальной функцией beforeSend(). В функции beforeSend() вы можете загрузить очень крутую анимацию подарков, которая будет отображаться на вашем экране, прежде чем ваш основной контент будет готов к просмотру.

Используйте этот момент, чтобы показать свое творчество перед вашей аудиторией, перед основным событием!