xandeadx.ru Блог музицирующего веб-девелопера

Javascript → Асинхронный вариант гугло кнопки +1

Опубликовано

В русской версии мастера генерации кнопки +1, почему то нет опции "asynchronous code", о которой так радостно трубил гугл (пруф). Поэтому правим ручками:

вместо

<script src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

пишем

<script>
(function() {
  var po = document.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);
})();
</script>
<g:plusone></g:plusone>
Похожие записи

Комментарии RSS

Аватар пользователя SplasH
SplasH, #

А почему не воспользовался setTimeout ?

Аватар пользователя xandeadx
xandeadx, #

эмммм, что?

Аватар пользователя SplasH
SplasH, #

Ну вот например асинхронная загрузка скрипта openAPI

setTimeout(function() {
  var el = document.createElement("script");
  el.type = "text/javascript";
  el.src = "http://vkontakte.ru/js/api/openapi.js";
  el.async = true;
  document.getElementById("vk_api_transport").appendChild(el);
}, 0);
Аватар пользователя xandeadx
xandeadx, #

ну и какой смысл в setTimeout?)

Аватар пользователя SplasH
SplasH, #

В асинхронности, собсна) Замечая вызов setTimeout интерпретатор закидывает его в стек вызова и читает скрипты дальше, т.е. время на создание скрипта не тратится.

Аватар пользователя xandeadx
xandeadx, #

асинхронность тут в document.createElement, а не setTimeout

Аватар пользователя SplasH
SplasH, #

Ну так создание же выполняется с setTimeout асинхронно

Аватар пользователя xandeadx
xandeadx, #

смысл кода - не ждать загрузки https://apis.google.com/js/plusone.js, а не в асинхронном создании элемента

Аватар пользователя SplasH
SplasH, #

Ты забываешь про корректность работы во всех браузерах. Твой скрипт не будет асинхронно работать в IE 7 например.

Аватар пользователя xandeadx
xandeadx, #

пруф?

Аватар пользователя SplasH
SplasH, #

Нотариально заверенный скриншот из ie7: http://clip2net.com/s/1lUaG

Аватар пользователя SplasH
SplasH, #

После обортки в setTimeout: http://clip2net.com/s/1lUdZ

Аватар пользователя xandeadx
xandeadx, #

Нотариально заверенный скриншот из ie7

ну как и следовало ожидать, скрипт plusone.js загружается параллельно с картинками (читай асинхронно)

Аватар пользователя SplasH
SplasH, #

Что-то я запутался в результатах теста. Даже когда убираешь el.async = true; он всё равно грузится с картинками асинхронно. Потестируй в IE7 код, очень интересные результаты получаются.

Аватар пользователя xandeadx
xandeadx, #

http://xandeadx.ru/blog/javascript/488#comment-3985

Аватар пользователя SplasH
SplasH, #

Но ведь миллионы мух не могут ошибаться. Многие асинхронные загрузки сделаны именно с использованием setTimeout.

Аватар пользователя Vydrin_AP
Vydrin_AP, #

В русской версии мастера генерации кнопки +1, почему то нет опции "asynchronous code"

http://www.google.com/intl/ru/webmasters/+1/button/index.html здесь нет.
http://www.google.com/webmasters/+1/button/ а тут есть.

Аватар пользователя xandeadx
xandeadx, #

у меня нигде нет)

Аватар пользователя Vydrin_AP
Vydrin_AP, #

Advanced options

Аватар пользователя plutov
plutov, #

Спасибо за статью. Думаю, вам будет интересно почитать мою статью на тему асинхронности JS: http://plutov.by/post/javascript_memory

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании