更流畅的页面加载保存JQuery toggleClass设置

Smoother page loading for saved JQuery toggleClass setting

本文关键字：保存 JQuery toggleClass 设置 加载      更新时间：2023-09-26

我使用以下代码来利用JQuery和本地存储来存储可折叠div的toggleClass设置。

<script type="text/javascript">
    $(document).ready(function () {
        if (typeof (Storage) !== "undefined") {
            $('#wrapper').attr('class', localStorage.getItem("wrapper_class"));
        }
        $("#menu-toggle").click(function () {
            $("#wrapper").toggleClass("active");
            localStorage.setItem("wrapper_class", $('#wrapper').attr('class'));
        });
    });
</script>

代码在大多数情况下工作良好。但是，当页面加载时，无论如何都会出现可折叠的div，然后如果最后设置为这样设置，则会折叠。根据我的理解，这是因为文件。Ready函数等待所有元素都在那里并且可用。是否有一种简单的方法来设置这个加载不会看起来那么笨拙，并有可折叠的div只是出现在其适当的状态?

这只是我的一时疏忽。问题是JQuery的加载时间太长，会造成视觉干扰。用$('#wrapper').attr函数设置它不是很好。我将localStorage检索功能从中取出，并在导入JQuery之前加载它。

<script type="text/javascript">
    if (typeof (Storage) !== "undefined") {
        var cName = localStorage.getItem("wrapper_class");
        document.getElementById("wrapper").className = cName;
    }
</script>
相关文章：