Загружаем скрипты асинхронно (сниппет)

Список разделов phpBBex 1.x (поддерживается) Мастерская 1.x

Описание: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Модератор: Поддержка

Сообщение #1 factotum » 20.01.2013, 21:20

Код: Выделить всё
<script>
// Настройки Google Analitics
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'Аккаунт аналитики']);
_gaq.push(['_setDomainName', 'домен']);
_gaq.push(['_trackPageview']);

// Выставляем русский для Google+
window.___gcfg = {lang: 'ru'};
         
// Настройки Вконтакте
window.vkAsyncInit = function () {
   VK.init({
      apiId: 'YOUR_ID',
      onlyWidgets: true
   });
   VK.Widgets.Like('vk_like', {
      type: 'button',
      height: '20'
   });
};

// Настройки Facebook
window.fbAsyncInit = function() {
   FB.init({
      appId : 'YOUR_ID',
      status : true,
      cookie : true,
      xfbml : true,
      oauth: true
   });
};

(function(doc, script) {
   var js,
   fjs = doc.getElementsByTagName(script)[0],
   add = function(url, id) {
      if (doc.getElementById(id)) {return;}
      js = doc.createElement(script);
      js.src = url;
      id && (js.id = id);
      fjs.parentNode.insertBefore(js, fjs);
   };

   // Google Analytics
   add(('https:' == location.protocol ? '//ssl' : '//www') + '.google-analytics.com/ga.js', 'ga');
   // Google+ button
   add('https://apis.google.com/js/plusone.js');
   // Facebook SDK. Добавлена смена языка в зависимости от атрибута страницы
   add('//connect.facebook.net/' + document.documentElement.lang.replace("-","_") + '/all.js', 'facebook-jssdk');
   // Twitter SDK
   add('//platform.twitter.com/widgets.js', 'twitter-wjs');
   // Add VK
   add('//userapi.com/js/api/openapi.js');
}(document, 'script'));
</script>

В основе сниппет Nicolas Gallagher. я(с)

По теме:
FB.Init: https://developers.facebook.com/docs/reference/javascript/FB.init/
VK.Init: http://vk.com/developers.php?oid=-1&p=VK.init
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #2 factotum » 27.02.2013, 19:18

Код: Выделить всё
(function(w, d, s) {
   function go(){
      var js,
      fjs = d.getElementsByTagName(s)[0],
      add = function(url, id) {
         if (d.getElementById(id)) {return;}
         js = d.createElement(s);
         js.src = url;
         id && (js.id = id);
         fjs.parentNode.insertBefore(js, fjs);
      };
      // Google Analytics
      add(('https:' == document.location.protocol ? 'https://ssl':'http://www')+'.google-analytics.com/ga.js');
      // Facebook SDK
      add('//connect.facebook.net/' + document.documentElement.lang.replace("-","_") + '/all.js', 'facebook-jssdk');
      // Twitter SDK
      add('//platform.twitter.com/widgets.js', 'twitter-wjs');
      // Google+ button
      add('https://apis.google.com/js/plusone.js');
      // VK
      add('//vk.com/js/api/openapi.js');
   }
   if (w.addEventListener) { w.addEventListener("load", go, false); }
   else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
наконец дошли руки дописать. теперь весь "боекоплект" скриптов подгружается после загрузки страницы. Минус в перерисовке окна браузером, но основная цель достигнута - время загрузки страницы уменьшилось почти вдвое. "Боекомплект" просто зарядить своими "патронами".
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #3 factotum » 28.02.2013, 12:53

Код: Выделить всё
(function(w, d, s) {
   function go(){
      var js,
      fjs = d.getElementsByTagName(s)[0],
      add = function(url, id) {
         if (d.getElementById(id)) {return;}
         js = d.createElement(s);
         js.src = url;
         id && (js.id = id);
         fjs.parentNode.insertBefore(js, fjs);
      };
      // Google Analytics
      add(('https:' == d.location.protocol ? 'https://ssl':'http://www')+'.google-analytics.com/ga.js');
      // Facebook SDK
      add('//connect.facebook.net/' + d.documentElement.lang.replace("-","_") + '/all.js', 'facebook-jssdk');
      // Twitter SDK
      add('//platform.twitter.com/widgets.js', 'twitter-wjs');
      // Google+ button
      add('https://apis.google.com/js/plusone.js');
      // VK
      add('//vk.com/js/api/openapi.js');
      add('http://pagead2.googlesyndication.com/pagead/show_ads.js');
   }
   if (w.addEventListener) { w.addEventListener("load", go, false); }
   else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
убрал 10 лишних символов
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Как?

Сообщение #4 Гость » 28.02.2013, 17:45

Как это применить на форуме практически?

Какие файлы нужно интегрировать?
Гость
Гость

Сообщение #5 factotum » 28.02.2013, 20:23

Гость:Как это применить на форуме практически?
А Вы не используете скрипты?
Скрипты форума. Скрипты аналитики. Плагины jQuery. Скрипты социальных сетей: /viewtopic.php?t=339
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #6 factotum » 01.03.2013, 15:15

Сегодня столкнулся с тривиальным вопросом. Из-за проблем с сетью один из скриптов не загружался, блокируя загрузку страницы.
примерно тоже тут: http://habrahabr.ru/post/139895/

решение: http://jsperf.com/settimeout-vs-cleartimeout

Добавлено спустя 20 минут 3 секунды:
с оптимизациями компилятора получилось как то так:
Код: Выделить всё
(function(a, c, f) {
  function g() {
    var d, a = c.getElementsByTagName(f)[0], b = function(b, e) {
      c.getElementById(e) || (d = c.createElement(f), d.src = b, d.async = !0, e && (d.id = e), a.parentNode.insertBefore(d, a))
    };
    b(("https:" == c.location.protocol ? "https://ssl" : "http://www") + ".google-analytics.com/ga.js");
    b("//connect.facebook.net/" + c.documentElement.lang.replace("-", "_") + "/all.js", "facebook-jssdk");
    b("//platform.twitter.com/widgets.js", "twitter-wjs");
    b("https://apis.google.com/js/plusone.js");
    b("//vk.com/js/api/openapi.js")
  }
  a.addEventListener ? a.addEventListener("load", g, !1) : a.attachEvent && a.attachEvent("onload", g)
})(window, document, "script");
осталось наиграться с таймутом
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев

Сообщение #7 kabmir » 07.08.2013, 13:44

Черт возьми, реально работает!
Но вы пишете:
"осталось наиграться с таймутом"
Как наиграться?

Добавлено спустя 1 минуту 59 секунд:
Быть может вы еще можете подсказать, как избавиться от ненужных дописей в ссылках страниц сайтов, которые оценили кнопкой Лайк Фейсбука?
:help:

Добавлено спустя 3 минуты 1 секунду:
И кстати сказать, эта вещь:
Код: Выделить всё
document.documentElement.lang.replace("-","_")
не работает, все части Фейса работают тогда только на англ. языке.
Как сделать, чтобы эта строка также и русский определяла?
kabmir M
Репутация: 0
С нами: 10 лет 8 месяцев

Сообщение #8 factotum » 07.08.2013, 17:49

http://codepen.io/vralle/pen/lyhnB

не забудьте для FB и VK заменить ID на свои.
factotum
Автор темы
Откуда: Люксембург
Репутация: 234
С нами: 11 лет 11 месяцев


Вернуться в Мастерская 1.x



cron