boilerplate.js/Boilerplate/src/js/helpers/Defer.js

Development Tools

// Asynchronous Load CSS/JS Files/Libraries

/* How To Use

    // Load CSS
    Defer.css('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
    
    Defer.css('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css', function (){
        console.log('Bootstrap Loaded!');
    });

    // Load JS
    Defer.js('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js');

    Defer.js('https://code.jquery.com/jquery-3.3.1.min.js', function (){
        console.log('jQuery Loaded!');
    });

    -or-

    // Load CSS
    Defer('css', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

    Defer('css', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css', function (){
        console.log('Bootstrap Loaded!');
    });

    // Load JS
    Defer('js', 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js');

    Defer('js', 'https://code.jquery.com/jquery-3.3.1.min.js', function (){
        console.log('jQuery Loaded!');
    });


*/
function Defer(type, src, callback) {

    if (type === 'js') {

        if (typeof src === 'object') {
            let library = src;
            if (library.length === 0) {
                callback && callback();
                return;
            }
            Defer.js(library.shift(), () => {
                Defer.js(library, callback);
            });
        } else {

            var test = document.querySelector('script[src="' + src + '"]');

            if (test) {
                
                callback && callback();
                return;
    
            } else {
    
                var a = document.createElement("script");
    
                a.src = src;
                a.async = true;
                a.type = "text/javascript";
                a.onload = callback;
    
                document.getElementsByTagName('head')[0].appendChild(a);
            }

        }

    }



    if (type === 'css') {
        var test = document.querySelector('link[href="' + src + '"]');

        if (test) {

            callback && callback();
            return;

        } else {

            var a = document.createElement("link");

            a.href = src;
            a.async = true;        
            a.rel = "stylesheet";
            a.property = 'stylesheet';
            a.type = 'text/css';
            a.onload = callback;

            document.getElementsByTagName('head')[0].appendChild(a);
        }    

        
    }

    if (type === 'images') {
        
        let hasEditImages = false;
        
        try {
            components.edit.items.images;
            hasEditImages = true;
        } catch (error) {
            null;
        }   

        let attribute = `src-${mq()}`;

        [...document.querySelectorAll(`img[${attribute}]:not([skip-defer])`)].forEach(img => {
            checkSpanish(img, attribute);
        });

        attribute = 'src-all';

        [...document.querySelectorAll(`img[src-all]`)].forEach((img) => {
            checkSpanish(img, attribute);
        });

        function checkSpanish(img, attribute) {

            let url = img.getAttribute(attribute);
            if ( img.getAttribute('check-for-spanish') && checkParameterByName('lang', 'es') ) {
               
                let split = url.split('.');
                let extension = split.pop();
                let base = split.join('.');
                let spanishURL = base + '_spanish.' + extension;
                
                img.src = spanishURL;
                
                img.onerror = () => {
                    img.src = url;
                };

                img.onload = () => {
                    let parentElm = img.closest('.placeholder');
                    parentElm.removeAttribute('style');
                    parentElm.className = parentElm.className.replace('placeholder', '').trim();
                    components.spanish.detected = true;
                    components.spanish.init();
                };

            } else {
                img.src = url;

                img.onload = () => {
                    let parentElm = img.closest('.placeholder');
                    parentElm.classList.add('done');
                    parentElm.removeAttribute('style');
                    // img.parentElement.className = img.parentElement.className.replace('placeholder', '').trim();
                };
            }

            img.removeAttribute(attribute);

        }

    }

}

Defer.css = (src, callback) => Defer('css', src, callback);
Defer.js  = (src, callback) => Defer('js' , src, callback);
Defer.images  =  (callback) => Defer('images', null, callback);