Смена темы сайта без мерцания

FanAizu · February 18, 2015

Скриптами я меняю значение href у тега link со стилями сайта. То есть меняю темы сайта безе перезагрузки сайта. Так вот, как только скрипт меняет href у link, то сайт становится без оформления, пока не загрузятся стили новой темы и не применятся браузером. Как избавиться от такого поведения?

Great Rash · February 18, 2015

Нужно отследить когда стили загрузились и только после этого менять href. Например при помощи ajax. Хотя я бы сделал проще: грузил бы все стили сразу, а потом менял бы класс у <html>, в зависимости от которого менялось бы оформление.

FanAizu · February 18, 2015

Нужно отследить когда стили загрузились и только после этого менять href. Например при помощи ajax. Хотя я бы сделал проще: грузил бы все стили сразу, а потом менял бы класс у <html>, в зависимости от которого менялось бы оформление.

тем может быть 1000, и все в одном файле тянуть не по феншую)

А про аякс и тег style думал, но плохо тем, что не будет кэшироваться браузером css и при каждом новом открытии браузера будут заного тянуться стили...

Great Rash · February 18, 2015

В документации к jQuery например написано, что по умолчанию запросы кешируются.

FanAizu · February 18, 2015

В документации к jQuery например написано, что по умолчанию запросы кешируются.

Полагаю, что они кэшируются в рамках жизни страницы, а после перезагрузки страницы будут заного посылаться ajax запросы, иначе как кэшировать данные, полученные ajax-ом? Разве что localStorage юзать, но он ограничен 5 мб, что тоже не есть хорошо.

Great Rash · February 18, 2015

Ну тогда я могу посоветовать разве что юзать сервер. Т.е. формировать страницу на сервере и перезагружать на клиенте с новыми стилями.

afdw · February 18, 2015

Можно объединить два способа: одновременно ставить class и создавать новый link со стилями темы, а старый не трогать.

FanAizu · February 18, 2015

Можно объединить два способа: одновременно ставить class и создавать новый link со стилями темы, а старый не трогать.

не поможет т.к. пока стили не загрузятся сайт будет голый. То есть класс мы сменили на новый и создали link и указали урл файла со стилями. Пока стилей нету в браузере - сайт будет без стилейотображаться, а когда загрузятся - тогда станет норм.

afdw · February 18, 2015

<link onload="javascript:Сменить класс">

?

Great Rash · February 18, 2015

Событие onload у <link> не везде работает.

FanAizu · February 19, 2015

Событие onload у <link> не везде работает.

ага, в том-тоо и загвоздка

Great Rash · February 19, 2015

Ну можно заняться всякими извращениями: грузить в shadow DOM стили, потом лезть в document.styleSheets с определенным интервалом и смотреть не появилась ли там новая таблица стилей. Как только начальное значение length поменялось значит стили загрузились и пора аппендить их в <head>.

Switch74 · February 19, 2015

ну можно сделать такой костыль:

вставляете <link> с указанием css вашей темы (в каждом таком файле добавляете стиль с названием темы, например span.theme{display:block;})
и создаете тестовый элемент <span class="theme">
в скрипте делаете функцию по таймеру проверяющую параметр disply, если она стала равна block наш стиль подгрузился, можно менять на него

идея общая, можно использовать другие параметры стилей и их значения, так же можно держать элемент <span class="theme"> по умолчанию и менять его ширину в зависимости от подгруженной темы: если загружена первая тема width=1px, если 21 - width=21px
идею можете расширять как хотите

PS
как предложили выше: можно воспользоваться frame загрузив туда стиль (проверку загрузки стиля можно реализовать выше описанным способом, но куда проще) - после этого он будет в кэше и на своей страничке мгновенно можете менять на него

antonKar · February 19, 2015

А прелоадеры в наше время не модны?

FanAizu · February 26, 2015

ну можно сделать такой костыль:
вставляете <link> с указанием css вашей темы (в каждом таком файле добавляете стиль с названием темы, например span.theme{display:block;})
и создаете тестовый элемент <span class="theme">
в скрипте делаете функцию по таймеру проверяющую параметр disply, если она стала равна block наш стиль подгрузился, можно менять на него

идея общая, можно использовать другие параметры стилей и их значения, так же можно держать элемент <span class="theme"> по умолчанию и менять его ширину в зависимости от подгруженной темы: если загружена первая тема width=1px, если 21 - width=21px
идею можете расширять как хотите

PS
как предложили выше: можно воспользоваться frame загрузив туда стиль (проверку загрузки стиля можно реализовать выше описанным способом, но куда проще) - после этого он будет в кэше и на своей страничке мгновенно можете менять на него

Скажите, пожалуйста, заинтересовал вариант с iframe-ом. У него есть событие onload у window, которое срабатывает, когда все ресурсы загружены. Но ведь страницу, которая будет грузиться в iframe нужно формировать на сервере, при этом постоянно с разными значение атрибута href у тега link. На клиенте же нельзя создать документ, который передаем в айфрэм, а затем в нем срабатывает событие onload. Как быть?

Switch74 · February 27, 2015

грузите не документ, а ваш css
попробуйте поэкспериментировать с данным примером

<!DOCTYPE html><html><head><link id="css" rel="stylesheet" href="style.css"></head><body><iframe id="theme" name="theme" src="" scrolling="no" noresize style="width:200px;height:200px;"></iframe><br><button onclick="set_theme(this.value)" value="style.css">theme</button><button onclick="set_theme(this.value)" value="style1.css">theme1</button><button onclick="set_theme(this.value)" value="style2.css">theme2</button><script>document.getElementById('theme').onload = function(event){    document.getElementById('css').href = this.src;}function set_theme(theme){document.getElementById('theme').src = theme;}</script></body></html>

Sign In

Смена темы сайта без мерцания

Question

Link to comment

Share on other sites

15 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information