Non-Onload-Blocking-Async-Evolved icon indicating copy to clipboard operation
Non-Onload-Blocking-Async-Evolved copied to clipboard

Published 20 hours ago • verified publisher icon tokkonopapa
→

Metadata

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

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

← Metadata

15
Stars
2
Forks
Watchers

Owner

verified publisher icon tokkonopapa

Metadata

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

Back