修复页面加载子div短暂显示问题 实现CSS Grid每行排列4个div

子div加载闪烁问题修复 #

问题原因 #

你把隐藏子div的逻辑绑定在window.onload事件上，这个事件必须等页面所有资源（包括图片、样式表、第三方脚本等）全部加载完成才会触发，此时浏览器已经完成了首屏DOM渲染，子div会先显示在页面上，等JS执行后才被隐藏，自然会出现约1秒的闪烁。

修复方案 #

核心原则：默认隐藏的样式不要靠JS实现，直接写在CSS里，浏览器解析DOM时同步应用隐藏规则，从根源避免元素被渲染出来

• 新增CSS规则，给所有子div（通用class为column）设置默认隐藏
• 把JS的触发时机从window.onload换成DOMContentLoaded，这个事件在DOM结构解析完成就触发，不需要等所有资源加载，执行时机更早
• 修正原有JS函数的参数逻辑bug，原函数调用时传入了整个子div数组，和函数定义的参数类型不匹配

Grid布局调整为每行4个主div #

修改.row容器的grid-template-columns属性，原来写死了3个固定宽度值，改成4列配置即可，推荐用repeat(4, 1fr)实现宽度自适应平分，不需要手动计算固定宽度，适配性更好。

修正后的完整代码 #

CSS部分 #

body {
  margin: 10px;
  text-align: center;
  width: 380px;
}

.row {
  display: grid;
  /* 原3列配置：grid-template-columns: 180px 180px 180px; */
  /* 修改为4列自适应平分宽度 */
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}

/* 新增：默认隐藏所有子div，避免加载闪烁 */
.column {
  display: none;
}

.item {
  color: white;
  padding: 1.5em 0;
  font-size: 2em;
}

.a {
  background: #0d9;
}

.b {
  background: #d90;
}

.c {
  background: #9d0;
}

.d {
  background: #90d;
}

.e {
  background: #d09;
}

.f {
  background: #09d;
}

.g {
  background: #09d;
}

.h {
  background: #09d;
}

JavaScript部分 #

const subDivs = ["aH-summerCamps", "aH-trekking", "bP-longDistanceHiking", "bP-thruHiking", "c-oceanCruising", "c-riverCruising", "e-recreationsEvent", "e-sportsEvents", "pH-escortedTours", "pH-independentTours", "s-photographicSafari", "s-cyclingSafari", "sAs-backcountrySkiing", "v-conservationAndEnvironment", "sAs-downhillSkiing", "v-childcare"]
  .map(id => document.getElementById(id));

/**
 * 切换子div显示状态：仅显示指定id的子div，其余全部隐藏
 * @param {string|null} showId 要显示的子div id，不传/传null则隐藏全部子div
 */
function hideAllSubDivs(showId = null) {
  for (const div of subDivs) {
    div.hidden = div.id !== showId;
  }
}

// DOM结构解析完成就执行逻辑，不用等所有资源加载
document.addEventListener('DOMContentLoaded', () => {
  // 兜底：默认隐藏所有子div（CSS已经做了默认隐藏，这行兼容特殊场景）
  hideAllSubDivs();

  // 后续可在这里绑定主div的点击交互，比如点击对应主div展示所属子div
  // 示例：document.getElementById('adventureHolidays').addEventListener('click', () => hideAllSubDivs('aH-summerCamps'))
});

HTML部分说明 #

HTML结构不需要做任何修改，如果你不想新增CSS规则，也可以直接给所有子div标签加hidden属性，比如<div style="background-color: #4cc9f0" class="column" id="aH-summerCamps" hidden>，效果和CSS默认隐藏一致，只是维护成本更高，推荐用CSS统一控制。

补充说明 #

• 如果需要固定宽度4列，把grid-template-columns: repeat(4, 1fr)改成grid-template-columns: 87px 87px 87px 87px;即可，总宽度（487 + 310 = 378px）刚好匹配你设置的body宽度380px，不会出现横向溢出
• 所有默认展示/隐藏的首屏状态，都优先用CSS控制，不要依赖JS执行，否则只要JS加载延迟就一定会出现闪烁问题

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