Хорошо.Я провел немного больше исследований и экспериментов в этом, и я думаю, что нашел решение.Сначала немного справочной информации.Насколько я могу судить, проблема с мерцанием в том, что css загружается не полностью.Обычно вы хотите, чтобы загрузка выполнялась при загрузке страницы, если это не является серьезной проблемой производительности.Вы можете загружать их динамически по мере необходимости, но это приводит к проблеме, которая возникает у нас здесь, когда вы пытаетесь использовать данные, которые еще не загружены.Лучшее решение, которое я вижу, это загрузить все CSS в начале и динамически изменить их приоритет.Я проверил это, и это работает.с каскадными таблицами стилей (css) каскадная часть имени означает, что когда вы загружаете таблицу стилей, а затем загружаете другую, последняя имеет приоритетный приоритет.Моей первой мыслью было просто добавить еще одну таблицу стилей, которая переопределит предыдущую.Таким образом, при загрузке старая таблица стилей все еще использовалась, и мерцания не было.Единственная проблема, с которой я столкнулся, заключалась в том, что приоритет связанной таблицы стилей меняется на противоположный, то есть вам нужно переопределить первый, а не последний.Вот код, иллюстрирующий этот процесс:
<html>
<head>
<link href="yellow.css" rel="stylesheet" type="text/css" title="Yellow Theme" />
<link href="black.css" rel="stylesheet" type="text/css" title="Black Theme" />
<link href="white.css" rel="stylesheet" type="text/css" title="White Theme" />
<link href="red.css" rel="stylesheet" type="text/css" title="Red Theme" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function(){
$(".colorblack").click(function(){
$("link:first").attr("href", "black.css");
return false;
});
$(".colorred").click(function(){
$("link:first").attr("href", "red.css");
return false;
});
$(".colorwhite").click(function(){
$("link:first").attr("href", "white.css");
return false;
});
$(".coloryellow").click(function(){
$("link:first").attr("href", "yellow.css");
return false;
});
});
</script>
</head>
<body>
<a class="colorbox colorred" href="?theme=red" title="Red Theme">red theme</a></br>
<a class="colorbox colorblack" href="?theme=black" title="Black Theme">black theme</a></br>
<a class="colorbox colorwhite" href="?theme=white" title="White Theme">white theme</a></br>
<a class="colorbox coloryellow" href="?theme=yellow" title="Yellow Theme">yellow theme</a></br>
</body>
</html>
И CSS довольно прост.например,
body
{
background-color:yellow;
}
Это работает в Chrome и FF, но не работает в IE или Opera.Замена узлов связи, кажется, не работает так же хорошо в этих двух.Но в основном, вот как ты это делаешь.:)