roi-theme/Assets/Js/lazy-css-loader.js

/**
 * TIPO 5: Lazy CSS Loader
 *
 * Carga CSS no critico despues del evento load usando:
 * - requestIdleCallback para CSS de baja prioridad
 * - Event listeners para CSS condicional
 *
 * @package ROITheme
 * @since 1.0.20
 */
(function() {
    'use strict';

    // Configuracion de CSS lazy (inyectada desde PHP)
    var config = window.roiLazyCSSConfig || {
        baseUrl: '',
        version: '1.0.0',
        idleTimeout: 2000,
        cssFiles: []
    };

    /**
     * Carga un archivo CSS de forma asincrona
     *
     * @param {string} href URL del archivo CSS
     * @param {string} id ID del elemento link
     * @returns {Promise}
     */
    function loadCSS(href, id) {
        // Evitar duplicados
        if (document.getElementById(id)) {
            return Promise.resolve();
        }

        return new Promise(function(resolve, reject) {
            var link = document.createElement('link');
            link.id = id;
            link.rel = 'stylesheet';
            link.href = href;
            link.onload = resolve;
            link.onerror = reject;
            document.head.appendChild(link);
        });
    }

    /**
     * Carga CSS cuando el navegador esta idle
     *
     * @param {Array} files Lista de archivos a cargar
     */
    function loadOnIdle(files) {
        var load = function() {
            files.forEach(function(file) {
                loadCSS(
                    config.baseUrl + file.path + '?ver=' + config.version,
                    'roi-lazy-' + file.id
                );
            });
        };

        if ('requestIdleCallback' in window) {
            requestIdleCallback(load, { timeout: config.idleTimeout });
        } else {
            // Fallback para Safari
            setTimeout(load, config.idleTimeout);
        }
    }

    /**
     * Carga CSS de print solo cuando se va a imprimir
     *
     * @param {Object} file Archivo de print CSS
     */
    function setupPrintCSS(file) {
        var loaded = false;

        var load = function() {
            if (loaded) return;
            loaded = true;
            loadCSS(
                config.baseUrl + file.path + '?ver=' + config.version,
                'roi-lazy-print'
            );
        };

        // Evento antes de imprimir
        window.addEventListener('beforeprint', load);

        // Fallback: detectar Ctrl+P / Cmd+P
        document.addEventListener('keydown', function(e) {
            if ((e.ctrlKey || e.metaKey) && e.key === 'p') {
                load();
            }
        });
    }

    /**
     * Inicializacion
     */
    function init() {
        var idleFiles = [];
        var printFile = null;

        config.cssFiles.forEach(function(file) {
            switch (file.trigger) {
                case 'idle':
                    idleFiles.push(file);
                    break;
                case 'print':
                    printFile = file;
                    break;
            }
        });

        // Cargar CSS idle despues de que la pagina este lista
        if (idleFiles.length > 0) {
            if (document.readyState === 'complete') {
                loadOnIdle(idleFiles);
            } else {
                window.addEventListener('load', function() {
                    loadOnIdle(idleFiles);
                });
            }
        }

        // Configurar CSS de print
        if (printFile) {
            setupPrintCSS(printFile);
        }
    }

    // Iniciar
    init();

})();