asset_loader

asset_loader.js

(function(window, document) {
    function bindReady(handler) {

        var called = false

        function ready() {
            if (called) return
            called = true
            handler()
        }

        if (document.addEventListener) { // native event
            document.addEventListener("DOMContentLoaded", ready, false)
        } else if (document.attachEvent) { // IE

            try {
                var isFrame = window.frameElement != null
            } catch (e) {}

            // IE, the document is not inside a frame
            if (document.documentElement.doScroll && !isFrame) {
                function tryScroll() {
                    if (called) return
                    try {
                        document.documentElement.doScroll("left")
                        ready()
                    } catch (e) {
                        setTimeout(tryScroll, 10)
                    }
                }
                tryScroll()
            }

            // IE, the document is inside a frame
            document.attachEvent("onreadystatechange", function() {
                if (document.readyState === "complete") {
                    ready()
                }
            })
        }

        // Old browsers
        if (window.addEventListener)
            window.addEventListener('load', ready, false)
        else if (window.attachEvent)
            window.attachEvent('onload', ready)
        else {
            var fn = window.onload // very old browser, copy old onload
            window.onload = function() { // replace by new onload and call the old one
                fn && fn()
                ready()
            }
        }
    }

    var readyList = []

    function onReady(handler) {

        function executeHandlers() {
            for (var i = 0; i < readyList.length; i++) {
                readyList[i]()
            }
        }

        if (!readyList.length) { // set handler on first run 
            bindReady(executeHandlers)
        }

        readyList.push(handler)
    }

    onReady(function() {
        var els = document.getElementsByClassName("css-preload");
        var i;
        for (i = 0; i < els.length; i++) {
            var styleElement = document.createElement('link');
            styleElement.rel = 'stylesheet';
            styleElement.href = els[i].href;
            document.head.appendChild(styleElement);
        }
    });

    onReady(function() {
        var els = document.getElementsByClassName("js-preload");
        var i;
        for (i = 0; i < els.length; i++) {
            var scriptElement = document.createElement("script");
            scriptElement.src = els[i].href;
            document.body.appendChild(scriptElement);
        }
    });
})(window, document);

asset_loader.min.js

!function(e,t){function n(n){function a(){l||(l=!0,n())}function o(){if(!l)try{t.documentElement.doScroll("left"),a()}catch(e){setTimeout(o,10)}}var l=!1;if(t.addEventListener)t.addEventListener("DOMContentLoaded",a,!1);else if(t.attachEvent){try{var r=null!=e.frameElement}catch(c){}t.documentElement.doScroll&&!r&&o(),t.attachEvent("onreadystatechange",function(){"complete"===t.readyState&&a()})}if(e.addEventListener)e.addEventListener("load",a,!1);else if(e.attachEvent)e.attachEvent("onload",a);else{var d=e.onload;e.onload=function(){d&&d(),a()}}}function a(e){function t(){for(var e=0;e<o.length;e++)o[e]()}o.length||n(t),o.push(e)}var o=[];a(function(){var e,n=t.getElementsByClassName("css-preload");for(e=0;e<n.length;e++){var a=t.createElement("link");a.rel="stylesheet",a.href=n[e].href,t.head.appendChild(a)}}),a(function(){var e,n=t.getElementsByClassName("js-preload");for(e=0;e<n.length;e++){var a=t.createElement("script");a.src=n[e].href,t.body.appendChild(a)}})}(window,document);

usage.md

#Asset Loader

asset loader for preloaded (rel=preload) assets.

it's not a polyfill. it's just a small script load assets declared with preload

add css and js assets as per the new w3c draft

<link rel="preload" class="css-preload" href="defer.css" as="stylesheet">
<link rel="preload" class="css-preload" href="https://fonts.googleapis.com/css?family=Material+Icons" as="stylesheet">
<link rel="preload" class="js-preload" href="main.js" as="javascript">

notice js-preload and css-preload classes. these classes will be used for finding out which scripts and styles to load.

copy and paste asset_loader.min.js at the bottom of body tag. if you need to support non javascript browsers use <noscript> tag to add the styles

based on - https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example and https://varvy.com/pagespeed/defer-loading-javascript.html

live example - http://www.findyogi.com