Giters

tokkonopapa / Non-Onload-Blocking-Async-Evolved

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

Home Page:http://tokkonopapa.github.io/Non-Onload-Blocking-Async-Evolved/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

About

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

http://tokkonopapa.github.io/Non-Onload-Blocking-Async-Evolved/

Languages

Language:CSS 77.2%Language:JavaScript 22.8%