使用Javascript为样式切换器添加样式表的最佳方法

Best way to add a stylesheet using Javascript for style switcher?

本文关键字：样式 最佳 方法 切换器 Javascript 使用 添加      更新时间：2023-09-26

我正在为我的网站开发样式切换器。我能够让它与.append()和if and else声明一起工作。这是代码：

.HTML 

<select name="active_style" id="lol" class="dropdownselect" >
    <option value="default" selected="selected">Default</option>
    <option value="dark" selected="selected">Dark</option>
</select>

爪哇语

$(document).ready(function() {
    var item = window.localStorage.getItem('active_style');
    $('select[name=active_style]').val(item);
    $('select[name=active_style]').change(function() {
       window.localStorage.setItem('active_style', $(this).val());
    });
    if (item == "dark") {
        $("head").append('<link rel="stylesheet" type="text/css" id="gdgt-dark" href="LINK");
    };
});

现在，上面的代码有效。但是当我加载页面时，由于某种原因加载 CSS 需要一些时间，因此，用户可以看到轻量级（默认）CSS。有没有办法添加CSS，以便在加载页面之前加载它更快更好？

请帮忙。

不要为此使用 jQuery，它需要一些时间来加载。纯JS会快得多：

var head= document.getElementsByTagName('head')[0];
var link= document.createElement('link');
link.type= 'text/css';
link.rel= 'stylesheet';
link.href= 'style.css';
head.appendChild(link);
好吧，

你自己回答了你的问题。您希望异步加载 CSS 文件。

1）您可以使用Filament Group制造的loadCSSPlugin来做到这一点。这是文章的链接，解释了如何使用此插件（http://deanhume.com/home/blogpost/loading-css-asynchronously/7104）。

2）如果您不想使用此插件，还有另一种方法。您可以在加载函数中放置时间延迟并显示加载图标。（更改 CSS ...

3）您也可以使用AJAX加载CSS文件。在这里你可以找到如何（http://www.w3schools.com/jquery/jquery_ajax_load.asp）。您还可以在 ajax （http://deano.me/2012/09/jquery-load-css-with-ajax-all-browsers/） 的success方法中进行后处理。

相关文章：