Ändern Sie die CSS nach Thema und entfernen Sie vorherige Thema css

Question

Ich habe die Funktionalität, die CSS-Datei des Themas nach Benutzerauswahl hinzufügen und entfernen Sie die vorherige ausgewählte theme.css Datei. Ich habe diesen Code geschrieben

var previousTheme="theme1"; 
var show='theme1'; 
$(document.body).on('change', '#selecttheme', function() { 
    show = $("option:selected", this).data('show'); 
    $("#hue-demo-bg-div").fadeToggle("3000", function(){ 
     $("#hue-demo-bg-div").removeClass(previousTheme).addClass(show).css('background-color',""); 
     $(document.head).find('#themecss').attr("href","/assets/css/"+show+".css"); 
     $('#heading_preview').css('color',""); 
     $('#description_preview').css('color',""); 
     $('#btn_text_preview').css('color',""); 
     $('#hue-demo-link-div').css('background-color',""); 
     $('#paragraph_preview').css('color',""); 
     $('#decline_preview').css('color',""); 
     $('#leadsnowheader').css('background-color',""); 
    }); 
    previousTheme=show; 
    $("#hue-demo-bg-div").fadeToggle("3000", function(){ 
     loadColorValues(); 
    }); 
}); 

Dieser Code funktioniert gut auf localhost. aber auf dem Server funktioniert es nicht richtig. Es dauert zu lange, um das CSS zu laden. Irgendwelche Hilfe oder Verbesserung in diesem Code ..?

Answer 1

Schreibe alles in plain JavaScript um. Dann verkleinern Sie die Datei. Minimieren Sie auch alle CSS-Dateien, die geladen werden sollen. Auch ist .change(function(){}); schneller als .on('change', function() {});

Ich weiß, es Lesbarkeit erhöht, wenn alles in variables setzen, aber jQuery eine Schleife durch das System der Elemente lassen die variables verringert die Zeit, zu finden.

Jetzt gibt es viele Faktoren auf der Serverseite, die dies beeinflussen können. Ich weiß nicht einmal, wo ich anfangen soll ...