Laden Sie die gespeicherte Localstorage-Klasse vor allem anderen ⇐ HTML

[Anonymous]

Ich habe überall gesucht und immer noch keine Lösung dafür gefunden. Ich habe ein vertikales Menü und es ist standardmäßig erweitert. Wenn ich wie im Bild unten auf die Schaltfläche „Umschalten“ klicke, wird die Klasse „verical-mini“ zum Tag „body“ hinzugefügt und außerdem im „localstorage“ gespeichert, das den minimierten Zustand darstellt.

Das Problem, das ich jetzt habe, ist, dass auf Bildschirmen mit schlechter Internetverbindung oder Chrome- und Edge-Browsern beim Laden/Aktualisieren von Seiten zuerst die standardmäßige erweiterte Klasse angezeigt wird und erst nach dem Laden des Dokuments, wenn die Mini-Klasse in localstorage vorhanden ist, die Vertical-Mini-Klasse zum Body-Tag hinzugefügt wird.

Es ist also möglich, die gespeicherte Klasse vor allem anderen aus localstorage zu laden, oder zumindest schneller, so wir Sie können den standardmäßigen erweiterten Status nicht zuerst sehen?

Ich habe auch versucht, die JQuery in den Header zu platzieren, aber es tritt immer noch die gleiche Verzögerung auf.

Jemand hat mir einen JQuery-Preloader vorgeschlagen, aber das ist keine Alternative, da einige meiner Seiten viel Inhalt haben und es einige Zeit dauern würde, bis das Dokument geladen wird.

jQuery-Code:

Code: Select all

$(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:

Code: Select all

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

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