如何在页面加载前运行JQuery？解决Squarespace侧边栏显示问题

嘿，我完全懂这种侧边栏一闪而过的糟心体验——明明要隐藏，却先蹦出来一下，确实影响观感。咱们来一步步解决这个问题，核心思路是让隐藏操作在页面渲染前就生效，而不是等DOM加载完才动手。

方法1：用CSS预隐藏（最有效，彻底消除闪烁） #

CSS是浏览器渲染元素时最先读取的样式，所以先全局隐藏侧边栏，再给需要显示它的页面单独“开绿灯”，从根源上避免闪烁：

1. 打开Squarespace后台，进入设置 > 高级 > 代码注入，在「页眉」里添加这段CSS：

/* 全局默认隐藏侧边栏 */
#rightSidebar {
    display: none;
    width: 0;
}

/* 仅在你需要显示侧边栏的页面恢复样式（替换成目标页面的body类） */
.your-target-page-body-class #rightSidebar {
    display: block;
    width: auto;
}

• 把your-target-page-body-class替换成你要显示侧边栏的页面的body类（比如某个页面的collection ID类，像.collection-xxxxxx）。如果只有单个页面需要显示，只保留这一行就行。

2. 然后简化你的JS代码，只处理内容区域的样式（因为侧边栏的显示/隐藏已经由CSS搞定了）：

$(function() { // 这是$(document).ready()的简写，更简洁
    const $body = $("body");
    if ($body.is('.item-main-image, .collection-5a9ebc04e2c4835e358488e3')) {
        // 合并CSS操作，更高效
        $(".collection-type-blog #content").css({
            "width": "100%",
            "max-width": "700px",
            "display": "block",
            "margin": "0 auto"
        });
    } else {
        // 恢复内容区域的默认样式（如果需要的话）
        $(".collection-type-blog #content").css({
            "width": "",
            "max-width": "",
            "margin": ""
        });
    }
});

方法2：让JS在DOM构建时就执行（替代方案） #

如果不想用CSS，也可以让JS更早运行。把脚本放在页眉代码注入里，用DOMContentLoaded事件（比$(document).ready()触发更早），能极大减少闪烁概率：

document.addEventListener('DOMContentLoaded', function() {
    const body = document.body;
    if (body.classList.contains('item-main-image') || body.classList.contains('collection-5a9ebc04e2c4835e358488e3')) {
        const content = document.querySelector('.collection-type-blog #content');
        const sidebar = document.getElementById('rightSidebar');
        
        // 直接操作样式，不用jQuery也可以（减少依赖）
        content.style.width = '100%';
        content.style.maxWidth = '700px';
        content.style.display = 'block';
        content.style.margin = '0 auto';
        
        sidebar.style.display = 'none';
        sidebar.style.width = '0';
    }
});

• 这段代码会在DOM刚构建完成（还没等所有图片、资源加载）就执行，比原来的ready事件早很多，闪烁几乎不可察觉，但还是不如CSS预隐藏彻底。

为什么原来的代码会闪烁？ #

$(document).ready()是等整个页面的DOM、图片、样式表都加载完成后才执行的，这时候侧边栏已经被浏览器渲染出来了，所以执行隐藏时会出现“先显示再消失”的闪烁。而CSS是在浏览器渲染每个元素时就应用的，预隐藏的话，元素从一开始就不会显示。

内容的提问来源于stack exchange，提问作者Gavin Friel