Question

我一直在搜索，但仍然无法解决这个问题。我有一个垂直菜单，默认情况下会展开。当我点击下图中的toogle按钮时，它会将body-mini类添加到body标签，并将其保存在localstorage中，这表示折叠状态。

现在我遇到的问题是，在糟糕的互联网连接屏幕上，或页面加载/刷新时的chrome和边缘浏览器，它首先显示默认的扩展类，并且只有在加载文档之后，如果mini类存在于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;
}

Answer 1

使用以下代码

基本jquery代码可以放在body的end标签附近（加载jquery之后）。这部分不会影响初始运作的速度

＆＃13;

$(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');
        }
    });
});

＆＃13;

这部分应该是纯javascript，应该在加载任何js或css文件之前放在head标签中

＆＃13;

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

＆＃13;

Answer 2

解决方案是 document.write ，灵感来自here

结合localStorage。一旦你有localStorage设置：

设置变量，查找localStorage值并创建菜单标记：

private void connectToWifiWPA2(final String networkSSID, final String networkPassword){
    WifiConfiguration conf = new WifiConfiguration();
    conf.SSID = "\"" + networkSSID + "\"";
    conf.preSharedKey = "\""+ networkPassword +"\"";

    WifiManager wifiManager = (WifiManager)getSystemService(WIFI_SERVICE);
    //if (!wifiManager.isWifiEnabled()){
    //    wifiManager.setWifiEnabled(true);
    //}
    conf.status = WifiConfiguration.Status.ENABLED;
    conf.allowedGroupCiphers.set(WifiConfiguration.GroupCipher.TKIP);
    conf.allowedGroupCiphers.set(WifiConfiguration.GroupCipher.CCMP);
    conf.allowedKeyManagement.set(WifiConfiguration.KeyMgmt.WPA_PSK);
    conf.allowedPairwiseCiphers.set(WifiConfiguration.PairwiseCipher.TKIP);
    conf.allowedPairwiseCiphers.set(WifiConfiguration.PairwiseCipher.CCMP);
    conf.allowedProtocols.set(WifiConfiguration.Protocol.RSN);

    int netId = wifiManager.addNetwork(conf);
    wifiManager.disconnect();
    wifiManager.enableNetwork(netId, true);
    wifiManager.reconnect();
}

如果localStorage值存在，则您的变量将包含带有vertical-mini类的menu标签。

，在“.vertical-menu”上方替换＆lt; menu＆gt;用：

<script>var menu = localStorage.savedmini ? '<menu class="vertical-mini">' : '<menu>';</script>

这样html就是用变量构建的，你不必等待（document）.ready（）。全部没有更新，更改，预加载或闪烁。

我们假设localStorage值存在，所以你的html看起来像这样：

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

...或者您用于菜单的任何标签。

在localhost上测试。工作良好。

在其他所有内容之前加载localstorage保存的类

2 个答案: