Load Social Media widgets libraries asynchronously and delayed (Facebook, Twitter, etc.)
PHP JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
examples
src/Lavoiesl/AsyncJsLoader
.gitignore
README.md
build.php
composer.json

README.md

Asynchronous Javascript Loader

Some javascript libraries are big and they pose a stress on the browser when they are loaded all at the same time.

Most of these libraries suggest to load them in async.

Library examples

  • Google Analytics
  • Google Maps
  • Google Plus
  • Facebook Like
  • Twitter button

Problems with existing solution

  • A lot of ugly script tag with semi-minified code.
  • Most of the library suggest the same trick so we see code duplication.
  • You have to go copy-paste the code each time you start a new project.
  • If you have multiple libraries, they will all fire at the same time, possibly causing a stress on the browser
  • While the libraries are loading (usually with a lot of dependencies) the browser is sluggish and users probably want to read that article before clicking on 'Like'.

Solution

  • Load each library with a function taking an id, a url and a delay.
  • Allow each library to have a different delay.
    • You may want Google Maps to load only 200ms after the page, but the Facebook Like can wait a bit more.

Usage

composer.phar install # autoloader
php build.php twitter facebook > /path/to/you/project/js/async-libs.js

And add a <script/> tag just before the closing tag of </body>.

Alternatively, you can copy paste the code in a document.ready.

Working example on jsfiddle

TODO

  • Add more libraries (only Twitter and Facebook at the moment).
  • Add configuration files
    • Facebook locale / xfbml
    • Google Maps sensors / api key

Author

Sebastien Lavoie

GitHub