Вызов URL-адреса неблокирующим способом на веб-странице

0

Время историй

У меня есть купленный/арендованный шрифт, чья лицензия просит меня запрашивать уникальный счетчик в своем домене каждый раз, когда отображается шрифт. К сожалению, их предложение состоит в том, чтобы вызвать его в файле CSS с import, который блокирует рендеринг на время вызова. Также странно, так как в соответствии с лицензией они хотят отслеживать отдельные просмотры страниц, но если файл CSS, о котором идет речь, кэшируется, не предотвратит ли это повторение импорт до тех пор, пока кеш не очистится?

В любом случае я удалил вызов import, но потом начал размышлять, что именно я должен его заменить. Какой тег даст мне неблокирующий вызов, который будет работать повсеместно в браузерах и независимо от отключенных функций? Ссылка с rel=prefetch? HTML5, он не работал в IE7, когда я тестировал его. И это также будет неудобно, поскольку он подразумевает, что ресурс должен кэшироваться, но ответ содержит директиву " No-Cache. Тег сценария с атрибутами defer и async в конце страницы? Может быть, но что, если кто-то отключил скрипты? Я мог бы добавить тег noscript а затем тег изображения внутри него как резерв. Но! Будет ли изображение отображаться как разбитое для некоторых браузеров, так как содержимое изображения является пустой строкой? И что, если у кого-то есть сценарии, а изображения отключены? о нет! Должен признаться, что для них мир должен быть довольно мрачным местом. Ой ой! Как насчет embed/object? Теперь, когда просто неправильно, перестаньте прикасаться ко мне смешно.

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

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

Код

Представьте, что мой уникальный счетчик шрифтов находится по адресу http://font.foo/bar, а сервер шрифта.foo действует медленно.


Отправная точка

// fonts.css
@import url('font.foo/bar')
@font-face { ... }

// index.html
<link rel="stylesheet" href="fonts.css">

Отдельный тег ссылки

// Problem: Blocks rendering
// index.html
<link rel="stylesheet" href="fonts.css">
<link rel="stylesheet" href="font.foo/bar">

отн = предвыборки

// Problem: Won't load in IE7, semantically awkward
// index.html
<link rel="prefetch" href="font.foo/bar">

Отложенная загрузка скрипта async

// Problem: Won't work when user has disabled scripting
// index.html
    <script src="font.foo/bar" async defer>
</body>

Сценарий с добавленным обратным изображением

// Problem: Won't work when user has disabled scripting AND images
// index.html
    <script src="font.foo/bar" async defer>
    <noscript><img src="font.foo/bar" alt=""></noscript>
</body>
Теги:
asynchronous

2 ответа

0

Взгляните на эту статью о загрузке асинхронного контента сторонних разработчиков, чтобы он соматировал вашу страницу.

http://css-tricks.com/thinking-async/
0

Может быть, смешать это так? У вас есть параметры сценария и продолжайте использовать элемент ссылки вместо img

    <script src="font.foo/bar" async defer>
    <noscript><link rel="stylesheet" href="font.foo/bar"></noscript>
</body>
  • 0
    <link> недопустима в <body>
  • 0
    В любом случае, не с rel. С атрибутом itemprop - да, но это HTML5, поэтому он не будет работать в старых браузерах, и в любом случае это семантически неправильно.
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню