Как отложить загрузку внешнего файла JS (Google Analytics)?

Question

Я использую следующий код для загрузки своей Google Analytics (внешний javascript) таким образом, чтобы не блокировал рендеринг.

Однако, используя YSlow и Safari Web Inspector - сетевой трафик ясно показывает, что скрипт ga.js по-прежнему блокирует повторную обработку.

/*
http://lyncd.com/2009/03/better-google-analytics-javascript/
Inserts GA using DOM insertion of <script> tag and "script onload" method to
initialize the pageTracker object. Prevents GA insertion from blocking I/O!

As suggested in Steve Souder's talk. See:
http://google-code-updates.blogspot.com/2009/03/steve-souders-lifes-too-short-write.html
*/

/* acct is GA account number, i.e. "UA-5555555-1" */
function gaSSDSLoad (acct) {
  var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."),
      pageTracker,
      s;
  s = document.createElement('script');
  s.src = gaJsHost + 'google-analytics.com/ga.js';
  s.type = 'text/javascript';
  s.onloadDone = false;
  function init () {
    pageTracker = _gat._getTracker(acct);
    pageTracker._trackPageview();
  }
  s.onload = function () {
    s.onloadDone = true;
    init();
  };
  s.onreadystatechange = function() {
    if (('loaded' === s.readyState || 'complete' === s.readyState) && !s.onloadDone) {
      s.onloadDone = true;
      init();
    }
  };
  document.getElementsByTagName('head')[0].appendChild(s);
}

/* and run it */
gaSSDSLoad("UA-5555555-1");

Любые идеи о том, как я могу использовать JavaScript, чтобы задержать загрузку файла ga.js, потому что приведенный выше код не работает так, как задумано, до тех пор, пока вся страница не будет отображена, чтобы я не блокировал рендеринг?

Answer 1

Если вы используете jQuery, вы можете включить Запустить его в (что совпадает с событием body onLoad ()):

$(window).load(function() {
    /* and run it */
    gaSSDSLoad("UA-5555555-1");
});

и если этого недостаточно, вы запускаете его через секунду (например ...):

$(window).load(function() {
    setTimeout("run_it()", 1000);
});

function run_it() {
    /* and run it */
    gaSSDSLoad("UA-5555555-1");
}

Хотя в этом нет необходимости ...

Answer 2

/* and run it */
gaSSDSLoad("UA-5555555-1");

Не запускайте его, пока страница не закончит рендеринг. То есть: под нагрузкой или где-то еще дальше. Не включайте вышеуказанные строки в сам блок встроенных скриптов, иначе вы ничего не получите.

Answer 3

Код, который вы получаете из Google Analytics, уже не блокируется. Должно быть что-то вроде этого:

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5555555-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

Google предлагает включить его перед закрывающим тегом. В общем, если вы хотите загружать другие javascripts асинхронно, я предлагаю вам использовать такой загрузчик, как:

• LABjs
• или ControlJS

Answer 4

Вы можете добавить прослушиватель к событию onload окна, документа или тела и выполнить вашу функцию gaSSDSLoad в это время.