设置display:none后轮播、预加载器、按钮等JS功能失效问题

• 实现预加载效果时，为类名为all-page-container的div容器添加内联样式style="display: none"，控制页面内容在预加载执行完成（设置至少2秒延迟）前保持不可见。
• 该样式导致轮播组件的JS初始化逻辑无法正确读取目标元素的尺寸类属性，出问题的初始化代码如下：

var s = $('.slider'),
    sWrapper = s.find('.slider-wrapper'),
    sItem = s.find('.slide'),
    btn = s.find('.slider-link'),
    sWidth = sItem.width(),
    sCount = sItem.length,
    slide_date = s.find('.slide-date'),
    slide_title = s.find('.slide-title'),
    slide_text = s.find('.slide-text'),
    slide_more = s.find('.slide-more'),
    slide_image = s.find('.slide-image img'),
    sTotalWidth = sCount * sWidth;

问题根因：元素处于display: none状态时不会进入浏览器渲染树，不占据文档流空间，所有尺寸、位置相关属性（如jQuery的width()、原生的offsetWidth等）读取结果均为0，属于浏览器默认渲染规则。

• 临时处理方案为通过while循环检测属性值不为0时再执行脚本，稳定性差，无法从根本解决问题。
• 验证确认：移除style="display:none"内联样式后，轮播组件、翻页按钮均可按预期运行，翻页触发逻辑本身无异常。

1. 调整初始化执行时机（推荐） #

将轮播组件的初始化逻辑，从页面初始加载阶段挪到预加载完成、all-page-container切换为可见状态之后执行。此时元素已经完成渲染，可正常读取所有尺寸属性，改造成本最低，适配绝大多数场景。
参考实现逻辑：

// 预加载完成的回调函数
function handlePreloadComplete() {
  // 先展示页面容器
  document.querySelector('.all-page-container').style.display = 'block';
  // 容器可见后再执行轮播初始化
  initSlider();
}

// 把原有轮播初始化逻辑封装为独立函数
function initSlider() {
  var s = $('.slider'),
      sWrapper = s.find('.slider-wrapper'),
      sItem = s.find('.slide'),
      btn = s.find('.slider-link'),
      sWidth = sItem.width(),
      sCount = sItem.length,
      slide_date = s.find('.slide-date'),
      slide_title = s.find('.slide-title'),
      slide_text = s.find('.slide-text'),
      slide_more = s.find('.slide-more'),
      slide_image = s.find('.slide-image img'),
      sTotalWidth = sCount * sWidth;
  // 剩余轮播交互逻辑...
}

2. 替换页面隐藏方案 #

如果业务要求必须提前执行组件初始化，可替换display: none为不脱离渲染树的隐藏方式，让元素视觉上不可见但依然会被浏览器正常渲染，即可正常读取尺寸属性：

• 使用visibility: hidden搭配height: 0; overflow: hidden：元素不占可视空间、不可见，内部元素尺寸可正常计算
• 使用屏幕外绝对定位：给容器加position: absolute; left: -99999px; top: 0;，元素正常渲染仅移出可视区域
• 使用透明度隐藏：给容器加opacity: 0; pointer-events: none，元素不可见、不响应交互，适合预加载遮罩完全覆盖页面的场景，注意该方式下元素仍占据原有文档流位置

3. 增加尺寸重算兜底逻辑 #

组件首次初始化完成后，可给window绑定resize事件监听，在页面尺寸变化、容器显示状态切换时，重新计算轮播项宽度、总宽度等依赖元素尺寸的参数，避免布局错位。

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