Question

我有根据用户选择添加主题的css文件的功能，并删除以前选择的theme.css文件。我写了这段代码

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();
   });
});

此代码在localhost上正常运行。但在服务器上它无法正常工作。加载css需要很长时间。对此代码有任何帮助或改进。？

Answer 1

用纯JavaScript重写所有内容。然后缩小文件。此外，缩小应加载的所有CSS文件。此外，.change(function(){});比.on('change', function() {});

更快

我知道在将所有内容放入variables时会增加可读性，但让jQuery循环遍历元素系统以查找variables会缩短时间。

现在，服务器端有很多因素会影响这一点。我甚至不知道从哪里开始...

根据主题更改css并删除以前的主题css

1 个答案: