加載localstorage保存的類之前

我一直在搜索，仍然沒有解決這個問題。我有一個垂直菜單，默認情況下是展開的。當我點擊下圖中的toogle按鈕時，它將verical-mini類添加到body標籤，並將其保存在代表摺疊狀態的localstorage內。加載localstorage保存的類之前

現在我遇到的問題是，在窮人的互聯網連接屏幕上，或頁面加載/刷新上的鉻和邊緣瀏覽器，它首先顯示默認擴展類，並且只有在文檔被加載後，如果迷你類存在於本地存儲，它將vertical-mini類添加到body標籤。

那麼是否有可能在本地存儲之前從localstorage加載保存的類，或者至少更快，因此我們不能首先看到默認的擴展狀態？

我也試着將jquery放在標題內，但仍然有相同的延遲。

有人建議我一個jQuery預加載器，但這不是一種替代方案，因爲我的一些頁面有很多內容，需要一段時間才能加載文檔。

jQuery代碼：

$(document).ready(function() { 

    $('.vertical-menu-toogle').click(function (event) { 
     event.preventDefault(); 

     $('body').toggleClass('vertical-mini'); 

     if($('body').hasClass('vertical-mini')){ 
      localStorage.setItem('savedmini', 'vertical-mini'); 
     } 
     else{ 
      localStorage.removeItem('savedmini'); 
     } 
    }); 

    var savedmini = localStorage.getItem('savedmini'); 
    if(savedmini !== ''){  
     $('body').addClass(savedmini); 
    } 
    else { 
     $('body').removeClass(savedmini); 
    } 
});

CSS：

.vertical-menu { 
    height: 100%; 
    width: 250px; 
} 

.vertical-mini .vertical-menu { 
    width: 80px; 
}

來源

2017-05-25 Jacksonfive

對於這個不是jQuery使用純java腳本，因爲如果您無法編輯html並將該類直接放在那裏，jquery需要時間加載並使用頭標記 –

中的純java腳本代碼。使用普通的javascript –

偉大的建議，但我不知道我發佈的jQuery代碼如何看起來像純js。任何幫助都感激不盡。 – Jacksonfive

使用下面的代碼

基本的jQuery代碼可以靠近身體的結束標記放（加載jquery後）。這部分將不會影響初始運作

$(document).ready(function() { 
 

 
    $('.vertical-menu-toogle').click(function (event) { 
 
     event.preventDefault(); 
 

 
     $('body').toggleClass('vertical-mini'); 
 

 
     if($('body').hasClass('vertical-mini')){ 
 
      localStorage.setItem('savedmini', 'vertical-mini'); 
 
     } 
 
     else{ 
 
      localStorage.removeItem('savedmini'); 
 
     } 
 
    }); 
 
});

速度

這部分應該是純的JavaScript和裝載任何之前應該被放置在頭部標籤JS或CSS文件

var savedmini = localStorage.getItem('savedmini'); 
 
    if(savedmini !== ''){  
 
     document.getElementsByTagName('body')[0].classList.add(savedmini); 
 
    } else { 
 
     document.getElementsByTagName('body')[0].classList.remove(savedmini); 
 
    }

來源

2017-05-25 13:19:01

您的代碼的第二部分無法正常工作，正文標記上的類未添加到頁面刷新上。 – Jacksonfive

檢查本地存儲看看是否條目保存與否 –

是保存在localStorage的，但只保存它。當我再次單擊按鈕時，它不會將其從localstorage中移除...並且不會將頁面vertical-mini添加到頁面刷新上的主體標記。 – Jacksonfive

的解決方案是文件撰寫，從here

與localStorage的組合的啓發。一旦你的localStorage的集：

在<頭>設置一個變量，尋找你的localStorage價值，創造你的菜單標籤：如果localStorage的值存在
```
<script>var menu = localStorage.savedmini ? '<menu class="vertical-mini">' : '<menu>';</script> 
```

，您的變量將具有vertical-mini類的菜單標籤。

在<體>

中，「.vertical菜單」以上取代<菜單>：

<script>document.write(menu);</script>

這樣，HTML是與變量一起構建，您不必等待（document）.ready（）。沒有更新，更改，預加載或閃爍。

我們假設localStorage的價值存在，所以你的HTML將是這個樣子：

<menu class="vertical-mini"><ul class="vertical-menu">...

......或任何標記使用的菜單。

測試本地主機上。工作正常。

來源

2017-11-25 00:23:40 Levi

加載localstorage保存的類之前

回答

相關問題