如何解决父container div未加载完成时center1子div优先显示的问题

问题原因 #

浏览器解析HTML采用从上到下的逐行渲染机制，你当前代码中.center1子元素没有设置初始隐藏，浏览器解析到该节点时就会直接渲染。而父级.container使用了Bootstrap的响应式类，若对应的Bootstrap样式文件加载滞后，就会出现子元素先显示、数秒后父级样式加载完成才正常展示的异常现象。

解决步骤 #

1. 给子元素设置初始隐藏样式 #

将以下CSS代码添加到页面<head>标签内的<style>块中，避免外部CSS加载延迟导致的闪显问题：

/* 初始状态隐藏.center1，避免提前渲染 */
.center1 {
  display: none !important;
}

2. 监听父元素加载完成后显示子元素 #

根据你的实际需求选择对应脚本，添加到页面底部</body>标签之前即可：

• 如果只需要等DOM结构解析完成就显示：

document.addEventListener('DOMContentLoaded', function() {
  // 匹配第一个class为container的父div
  const parentContainer = document.querySelector('.container:first-of-type');
  if (parentContainer) {
    const childCenter1 = parentContainer.querySelector('.center1');
    if (childCenter1) {
      // 移除隐藏状态
      childCenter1.style.display = 'block';
    }
  }
});

• 如果需要等父元素内的所有资源（图片、字体、样式等）全部加载完成再显示：

window.addEventListener('load', function() {
  const parentContainer = document.querySelector('.container:first-of-type');
  if (parentContainer) {
    const childCenter1 = parentContainer.querySelector('.center1');
    if (childCenter1) {
      childCenter1.style.display = 'block';
    }
  }
});

原相关HTML代码参考 #

<div class="row">
<div class="container">
    <p>here is the Parent Div Container</p>

    <div class="center1">
        <div class="container">
            <div class="row">
                <div class="col-md-8">

                    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

                        <div class="panel panel-default">
                            <div class="panel-heading" role="tab" id="headingTwo">
                                <b><span style="font-size: larger;">
                                        Small business product selector FAQs</span></b>
                                <hr style="margin-top: 1rem;">
                                <h4 class="panel-title" style="margin-top: 2rem;
                                                            font-size: medium;">
                                    <a class="collapsed" data-toggle="collapse" data-parent="#accordion"
                                        href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                        <b>What information do I need to use the Small Business Product
                                            Selector?</b>
                                    </a>
                                </h4>

                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel"
                                aria-labelledby="headingTwo">
                                <div class="panel-body">
                                    <p>All you need to use the product selector is your knowledge of the possible
                                        financial needs of your
                                        business.</p>
                                </div>
                            </div>
                        </div>
                        <hr>

                    </div>
                </div>
            </div>
        </div><!--Child Container Ends here-->
    </div>
</div><!--Parent Container Ends here-->

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