Перезагрузка таблицы стилей плавна в 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?
@Bravo исправил использование Math.random. Дело в том, что я использую частично динамически созданную таблицу стилей с PHP, поэтому пользователи могут изменять элементы на лету. Я полагаю, что в худшем случае я мог бы просто использовать какую-нибудь форму исчезающего фона с высокой непрозрачностью, чтобы заблокировать то, что происходит на заднем плане.
Или вы можете попробовать то, что я предложил
Однако следует отметить одну вещь: событие загрузки в ссылке rel=stylesheet срабатывает непосредственно перед фактическим применением стиля, поэтому я бы еще больше отложил удаление существующей таблицы стилей, используя setTimeout 0 мс.
Ответы 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» на« узле »: узел, перед которым должен быть вставлен новый узел, не является дочерним элементом этого узла».
Я починил это. Это потому, что это в Wordpress, и «голову» нужно добавить через функцию, а не только на самой странице плагина. И ваше решение действительно работает. Большое спасибо!
О, @Джо, я предполагал, что <link> элементы находятся в <head>
@Joe - я изменил код, чтобы он работал независимо от того, где находится элемент <link>.
Новый еще более удобен, потому что теперь я могу хранить таблицу стилей на главной странице моего плагина, что для меня проще... так как я делаю много плагинов и предпочитаю иметь доступ к файлам (в отличие от возврата и далее). Еще раз спасибо за помощь, серьезно. Это значительно улучшит пользовательский опыт.
Я бы попробовал добавить новую таблицу стилей, а затем удалить старую, я думаю, что «функция», как вы ее называете, связана с тем, что Firefox более эффективен при перерисовке страницы, поэтому фактически перерисовывает между наличием старой и новой таблицы стилей.