當用戶進行選擇時，我正在使用以下代碼重新加載樣式表：
<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 瀏覽器的一個功能？
uj5u.com熱心網友回復：
如果您加載新樣式表并在新樣式表生效后洗掉舊樣式表，則不應再發生無樣式格式的閃爍
注意：我已經取消了 .ready 中的 jquery，因為我真的不知道如何在 jQuery 中做很多事情 - 對我來說一直是 vanilla 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);
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/476153.html
標籤：javascript jQuery css 重新加载