Widget:Droflax

(function() {

   'use strict';
   
   // Configuración del widget
   var config = {
       modes: {
           styles: function() {
               // Solo inyectar CSS crítico
               mw.loader.load('//tu-wiki.org/w/index.php?title=MediaWiki:PersonaStyles.css&action=raw&ctype=text/css', 'text/css');
               
               // Precargar recursos no críticos
               var preloadLinks = [
                   '<link rel="preload" href="//tu-wiki.org/w/index.php?title=MediaWiki:PersonaAnimations.css&action=raw&ctype=text/css" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">',
                   '<link rel="preload" href="//tu-wiki.org/js/PersonaInteractions.js" as="script">'
               ].join();
               
               document.head.insertAdjacentHTML('beforeend', preloadLinks);
           },
           scripts: function() {
               // Esperar a que el contenido Lua esté listo
               var checkReady = setInterval(function() {
                   var container = document.querySelector('.personaje-box');
                   if (container && container.getAttribute('data-loaded') === 'false') {
                       clearInterval(checkReady);
                       container.setAttribute('data-loaded', 'true');
                       initPersonaje();
                   }
               }, 100);
               
               function initPersonaje() {
                   // Cargar JS no crítico de forma diferida
                   var script = document.createElement('script');
                   script.src = '//tu-wiki.org/js/PersonaInteractions.js';
                   script.defer = true;
                   script.async = true;
                   document.head.appendChild(script);
                   
                   // Activar animaciones CSS solo cuando todo esté listo
                   document.documentElement.classList.add('animations-ready');
               }
           }
       },
       init: function() {
           var mode = $.getUrlVar('mode') || 'scripts';
           if (this.modes[mode]) {
               this.modes[mode]();
           }
       }
   };
   
   // Inicialización
   if (typeof module === 'object' && typeof module.exports === 'object') {
       module.exports = config;
   } else {
       config.init();
   }

})();