Перезагрузка таблицы стилей плавна в Chrome, но странно в Firefox (jQuery)

Я использую следующий код для перезагрузки таблицы стилей, когда пользователь делает выбор:

<link type="text/css" id="main_style" href="css/style.php" rel="stylesheet">

<button id="secret_1" style="display:none;"></button>

$(document).ready(function(){
function freshStyle(stylesheet){
   $('#main_style').attr('href',stylesheet);
}
$('#secret_1').click(function(event){
    event.preventDefault();
    var restyled = 'style.php?v='+Math.floor(Math.random() * 10000); 
    freshStyle(restyled);
});
});

В Chrome перезагрузка происходит плавно, а переходы выглядят великолепно. В Firefox веб-сайт временно становится искаженным беспорядком (пока таблица стилей перезагружается) за секунду до того, как новая таблица стилей станет активной.

Это что-то, что можно решить с помощью кода, или это просто функция браузера Firefox?

Я бы попробовал добавить новую таблицу стилей, а затем удалить старую, я думаю, что «функция», как вы ее называете, связана с тем, что Firefox более эффективен при перерисовке страницы, поэтому фактически перерисовывает между наличием старой и новой таблицы стилей.

Bravo 17.05.2022 03:37

@Bravo исправил использование Math.random. Дело в том, что я использую частично динамически созданную таблицу стилей с PHP, поэтому пользователи могут изменять элементы на лету. Я полагаю, что в худшем случае я мог бы просто использовать какую-нибудь форму исчезающего фона с высокой непрозрачностью, чтобы заблокировать то, что происходит на заднем плане.

Joe 17.05.2022 04:27

Или вы можете попробовать то, что я предложил

Bravo 17.05.2022 04:57

Однако следует отметить одну вещь: событие загрузки в ссылке rel=stylesheet срабатывает непосредственно перед фактическим применением стиля, поэтому я бы еще больше отложил удаление существующей таблицы стилей, используя setTimeout 0 мс.

Bravo 17.05.2022 05:15
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Четыре эффективных способа центрирования блочных элементов в CSS
Четыре эффективных способа центрирования блочных элементов в CSS
У каждого из нас бывали случаи, когда нам нужно отцентрировать блочный элемент, но мы не знаем, как это сделать. Даже если мы реализуем какой-то...
Современные подходы к организации и работе с CSS в проекте
Современные подходы к организации и работе с CSS в проекте
Любой, кто писал CSS в течение некоторого времени, знает о сложностях, которые с этим связаны, и о том, насколько это может быть болезненно.
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Как использовать псевдокласс :hover в Tailwind только тогда, когда это действительно необходимо (при наличии курсора)
Я люблю Tailwind. Раньше я относился к нему с подозрением, но как только я попробовал его использовать, я был поражен тем, сколько времени он мне...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
Поговорим о глассморфизме (Glassmorphism)
Поговорим о глассморфизме (Glassmorphism)
В 2021 году Glassmorphism был огромным трендом в веб-дизайне. Я всегда люблю размытость в UI / UX, она делает пользовательский интерфейс более богатым...
0
4
29
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если вы загрузите новую таблицу стилей и удалите старую после того, как новая вступит в силу, мигание нестилизованного формата больше не должно происходить.

Примечание. Я покончил с jquery внутри .ready, так как я действительно не знаю, как сделать многое из того, что происходит здесь, в jQuery - для меня полностью ванильный JS (но вы можете преобразовать в jquery, если хотите) с ним удобнее)

$(document).ready(function() {
    function freshStyle(stylesheet) {
        const id = 'main_style';
        const main = document.getElementById(id);
        const sibling = main.nextElementSibling;
        const parent = main.parentElement;
        
        const style = document.createElement('link');
        style.rel = 'stylesheet';
        style.href = stylesheet;

        style.onload = () => {
            // load fires BEFORE style is applied - so delay a tick
            setTimeout(() => {
                // remove the old stylesheet
                main.remove();
                // set the id of the new sheet to the removed one
                style.id = id;
            }, 0);
        };
        // this just ensures the new stylesheet ends up exactly where the old was
        parent.insertBefore(style, sibling);
    }
    document.getElementById('secret_1').addEventListener('click', (e) => {
        e.preventDefault();
        const restyled = `style.php?v=${Math.floor(Math.random() * 10000)}`; 
        freshStyle(restyled);
    });
});

Я попробовал это, но выдал следующую ошибку «Uncaught DOMException: не удалось выполнить«insertBefore» на« узле »: узел, перед которым должен быть вставлен новый узел, не является дочерним элементом этого узла».

Joe 17.05.2022 05:25

Я починил это. Это потому, что это в Wordpress, и «голову» нужно добавить через функцию, а не только на самой странице плагина. И ваше решение действительно работает. Большое спасибо!

Joe 17.05.2022 05:48

О, @Джо, я предполагал, что <link> элементы находятся в <head>

Bravo 17.05.2022 05:50

@Joe - я изменил код, чтобы он работал независимо от того, где находится элемент <link>.

Bravo 17.05.2022 05:51

Новый еще более удобен, потому что теперь я могу хранить таблицу стилей на главной странице моего плагина, что для меня проще... так как я делаю много плагинов и предпочитаю иметь доступ к файлам (в отличие от возврата и далее). Еще раз спасибо за помощь, серьезно. Это значительно улучшит пользовательский опыт.

Joe 17.05.2022 05:59

Другие вопросы по теме