Loading the script async

[mihaifm]

You are suggesting to load the script using document.write, however this is a blocking operation, as described here:

http://www.stevesouders.com/blog/2012/04/10/dont-docwrite-scripts/
http://css-tricks.com/thinking-async/

When the server (the Livereload app) is not running, the browser simply waits for the connection to time out before continuing to render the page. This is especially frustrating on mobile, where it seems to take like forever to load a page.

The solution would be to use the async attribute, or to insert the script element dynamically in the DOM, as mentioned in the posts above.

I'm using this snippet:

<script>
(function() {
    var l = document.createElement("script");
    l.async = true;
    l.src = 'http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(l, s);
})();
</script>

Cheers!