/Non-Onload-Blocking-Async-Evolved

Load 3rd party scripts in parallel with the rest of your content without blocking onload.

Primary LanguageCSS

Non Onload Blocking Async JS Loading Evolved

Load 3rd party scripts in parallel with the rest of your content without blocking onload.

How ?

Prepare a small snippet like Nicolas Gallagher's code to launch 3rd party scripts.

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

    // Google Analytics
    win._gaq = [["_setAccount", "UA-XXXXX-X"],["_trackPageview"]];
    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/en_US/all.js#xfbml=1", "facebook-jssdk");
    // Twitter SDK
    add("//platform.twitter.com/widgets.js", "twitter-wjs");
    // Pocket SDK
    add("https://widgets.getpocket.com/v1/j/btn.js?v=1");
}(window, document, 'script'));

Wrap above code with parent.window and save it as snippet.js.

var win = parent ? parent.window : window;
(function (window, document) {
    // above codes here
}(win, win.document));

Fetch snippet.js with frame-in-frame method that is described in this post by Stoyan Stefanov.

(function (url) {
    setTimeout(function () {
        var iframe = document.createElement('iframe');
        (iframe.frameElement || iframe).style.cssText = 'display:none';
        iframe.src = 'javascript:false';
        var where = document.getElementsByTagName('script')[0];
        where.parentNode.insertBefore(iframe, where);
        var doc = iframe.contentWindow.document;
        doc.open().write('<body onload="' +
            'var js = document.createElement(\'script\');' +
            'js.src = \'' + url + '\';' +
            'document.body.appendChild(js);">');
        doc.close();
    }, 0);
}('snippet.js'));

That's it!

Demos

Related references