jquery - 在页面加载之前运行 JQuery

Question

我使用的是 Squarespace 中相当严格的模板。我只需要在一个页面上显示侧边栏导航，但是 Squarespace 不支持这一点，并在我不需要的许多其他页面中显示侧边导航。

我已经编写了以下内容，它可以工作，但是它会在删除它并更改页面之前渲染#rightSidebar，只需要不到一秒钟的时间，但它看起来仍然很差。

$(document).ready(function() {

    // turn sidebar off on any pages it shouldn't be
    if ($("body").is('.item-main-image, .collection-5a9ebc04e2c4835e358488e3')) {

        // CSS alterations
        $(".collection-type-blog #content").css("width", "100%");
        $(".collection-type-blog #content").css("max-width", "700px");
        $(".collection-type-blog #content").css("display", "block");
        $(".collection-type-blog #content").css("margin", "0 auto");
        $("#rightSidebar").css("display", "none");
        $("#rightSidebar").css("width", "0");
    }

});

有没有办法可以完全阻止 #rightSidebar 渲染，或者我可以在页面加载之前运行这段代码吗？

Answer 1

创建 CSS 规则来隐藏侧边栏

#rightSidebar { display: none; }

如果您希望它显示，请让您的 JavaScript 使其可见。

$('#rightSidebar').show();

使侧边栏不显示将阻止浏览器尝试渲染它，从而防止显示和 JavaScript 删除它之间的瞬间。