Question

我正在为我的网站开发一个样式切换器。我能够使用.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>

的Javascript

$(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，以便在加载页面之前加载它，这是快速和更好的？

请帮忙。

Answer 1

不要为此使用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);

Answer 2

你自己已经回答了你的问题。你想异步加载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 success方法（http://deano.me/2012/09/jquery-load-css-with-ajax-all-browsers/）进行后期处理。

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

2 个答案: