W3C home > Mailing lists > Public > whatwg@whatwg.org > September 2012

[whatwg] Deferring javascript download and execution until after onload

From: Andy Davies <dajdavies@gmail.com>
Date: Mon, 17 Sep 2012 12:19:08 +0100
Message-ID: <CABbusAKKvpmxhnt=HS73xQOBmiSzEo-3pwAzrZurhdUS3zDfZg@mail.gmail.com>
To: WHATWG List <whatwg@whatwg.org>
The script defer attribute allows us to defer JS until after
DOMContentLoaded (?) but it will still execute before onLoad

Sometimes there's a quite a bit of content on a page that could be
deferred until after onLoad, for example suplemental content such as
social media buttons, feedback forms etc. where they really don't make
much sense until the page hase loaded.

Currently patterns like the code below are being used to implement
this type of behaviour but has any thought been given to being able to
specify as part of the script element that the script could be
deferred until after onLoad?

<script>
(function(w, d, s) {
  function go(){
    var js, fjs = d.getElementsByTagName(s)[0], load = function(url, id) {
	  if (d.getElementById(id)) {return;}
	  js = d.createElement(s); js.src = url; js.id = id;
	  fjs.parentNode.insertBefore(js, fjs);
	};
    load('//connect.facebook.net/en_US/all.js#appId=272697932759946&xfbml=1',
'fbjssdk');
    load('https://apis.google.com/js/plusone.js', 'gplus1js');
    load('//platform.twitter.com/widgets.js', 'tweetjs');
  }
  if (w.addEventListener) { w.addEventListener("load", go, false); }
  else if (w.attachEvent) { w.attachEvent("onload",go); }
}(window, document, 'script'));
</script>

Script was borrowed from
http://www.aaronpeters.nl/blog/why-loading-third-party-scripts-async-is-not-good-enough

Thanks

Andy
Received on Monday, 17 September 2012 11:20:19 UTC

This archive was generated by hypermail 2.4.0 : Wednesday, 22 January 2020 16:59:45 UTC