Смена темы сайта без мерцания
Скриптами я меняю значение href у тега link со стилями сайта. То есть меняю темы сайта безе перезагрузки сайта. Так вот, как только скрипт меняет href у link, то сайт становится без оформления, пока не загрузятся стили новой темы и не применятся браузером. Как избавиться от такого поведения?
|
Цитата:
- грузить все стили разом - применить некую предзагрузку - использовать "спрайты" |
Альтернативные таблицы стилей тут были бы очень кстати. Вот только поддержка хромает. С хромом совсем печально. Вот версия, рабочая как минимум в последних версиях IE, Firefox, Chrome:
<!DOCTYPE html>
<meta charset="utf-8" />
<link rel="stylesheet" title="Default" href="data:text/css,body%7Bbackground%3Ared%7D" />
<link rel="alternate stylesheet" title="Alternate" href="data:text/css,body%7Bbackground%3Ablue%7D" />
<script>
function selectStyle(style) {
var sheets = document.styleSheets;
for (var i = 0; i < sheets.length; i++) {
var sheet = sheets[i];
var disabled = sheet.title !== style;
sheet.ownerNode.disabled = !disabled; // webkit workaround
sheet.ownerNode.disabled = sheet.disabled = disabled;
}
}
</script>
Test
<button onclick="selectStyle(textContent)">Default</button>
<button onclick="selectStyle(textContent)">Alternate</button>
Причем Firefox и IE предоставляют выбор темы прямо в меню браузера (появляется по Alt'у). Кроме того, IE восстанавливает последнюю выбранную тему после перезагрузки страницы. В общем, считаю что это отлично подходит, вот только нужно протестировать в разных браузерах. Вообще, вместо плясок с disabled мы должны использовать document.selectedStyleSheetSet = 'Имя темы'. Но это поддерживается только в Firefox. В хроме свойство есть, но оно не реагирует на запись. |
Попробуй загружать все link, а потом менять.
Смотри, есть стили: <link rel="stylesheet" data-default-style type="text/css" href="css/style1.css" title="Style1"> <link rel="alternate stylesheet" type="text/css" href="css/style2.css" title="Style2"> <link rel="alternate stylesheet" type="text/css" href="css/style3.css" title="Style3"> <link rel="alternate stylesheet" type="text/css" href="css/style4.css" title="Style4"> <link rel="alternate stylesheet" type="text/css" href="css/style5.css" title="Style5"> <link rel="alternate stylesheet" type="text/css" href="css/style6.css" title="Style6"> <link rel="alternate stylesheet" type="text/css" href="css/style7.css" title="Style7"> <link rel="alternate stylesheet" type="text/css" href="css/style8.css" title="Style7"> . По умолчанию будет запускаться тот, у которого в rel нет "alternate", насколько я помню. Потом скриптами меняешь:
var userStyle = function(styleTitle) {
var links = document.head.querySelectorAll('link[rel~="stylesheet"][title]');
var found = false;
for(var i=0; i<links.length; i++) {
links[i].disabled = true;
if(styleTitle == links[i].getAttribute('title')) { /* слышал, что IE глючит с title у link. Поэтому getAttribute */
links[i].disabled = false;
found = true;
}
}
if(!found) { /* не найдено → устанавливаем тот, что по умолчанию */
document.head.querySelector('[data-style-default]').disabled = false;
}
};
У меня немного по-другому, ибо ООП, но должно работать. |
Цитата:
В хроме работает твой код? |
Цитата:
|
| Часовой пояс GMT +3, время: 08:26. |