外层Div滑动顺畅但内部子Div内容加载滞后的问题求助

嘿，作为JS新手能折腾出平滑滑动效果已经超棒啦！咱们来拆解下这个间隙问题的解决思路~

你遇到的这个一秒左右的间隙，大概率是因为外层Div的滑动动画已经完成，但嵌套的子Div内容（比如图片、异步接口数据）还没完全加载渲染，导致滑动结束后内容才“补”上去，看起来就出现了空白间隙。下面给你几个实用的解决办法：

1. 提前预加载子Div内容 #

如果子Div里有图片这类静态资源，咱们可以在页面初始化或者触发滑动前就把它们预加载好，避免滑动时才开始加载：

// 预加载子Div内所有图片的函数
const preloadChildImages = () => {
  const childImgs = $('#display-map-info .child-div img');
  childImgs.each((_, img) => {
    const preloadImg = new Image();
    preloadImg.src = img.src;
  });
};

// 页面加载完成就开始预加载
$(document).ready(preloadChildImages);

// 或者在点击触发滑动前再确认一次预加载
$('#display-map-info').click(function () {
  preloadChildImages();
  // 这里执行你的滑动逻辑
  $('...').animate({/* 滑动参数 */}, 500);
});

如果是异步接口数据，建议提前发起请求把数据缓存好，滑动时直接渲染缓存好的内容，不用等请求返回。

2. 延迟滑动，等内容加载完成再执行 #

如果子Div内容的加载时长是可预期的，咱们可以让滑动动画等内容加载完成后再触发：

$('#display-map-info').click(function () {
  // 先等待子Div内容加载完成
  waitForChildContentLoaded().then(() => {
    // 内容加载好后再执行滑动
    $('...').animate({/* 滑动参数 */}, 500);
  });
});

// 封装等待内容加载的函数
function waitForChildContentLoaded() {
  return new Promise((resolve) => {
    const childImgs = $('#display-map-info .child-div img');
    let loadedCount = 0;

    // 检查每张图片是否加载完成
    childImgs.each((_, img) => {
      if (img.complete) {
        loadedCount++;
        checkIfAllLoaded();
      } else {
        img.onload = () => {
          loadedCount++;
          checkIfAllLoaded();
        };
      }
    });

    // 如果没有图片，直接resolve
    if (childImgs.length === 0) resolve();

    // 检查是否所有图片都加载完成
    function checkIfAllLoaded() {
      if (loadedCount === childImgs.length) resolve();
    }
  });
}

3. 给子Div设置最小高度 #

如果你能预估子Div内容的大致高度，可以给子Div加个min-height样式，这样即使内容没加载完，也会先占据对应的高度，滑动后不会出现突然的空白：

.child-div {
  min-height: 350px; /* 根据你的实际内容高度调整 */
}

4. 用骨架屏优化体验 #

如果内容加载确实需要时间，咱们可以在内容加载完成前显示一个和内容结构相似的骨架屏占位，滑动时用户看到的是骨架屏而非空白，体验会好很多：

<div class="child-div">
  <!-- 骨架屏占位 -->
  <div class="skeleton">
    <div class="skeleton-title"></div>
    <div class="skeleton-content"></div>
  </div>
  <!-- 实际内容，初始隐藏 -->
  <div class="actual-content" style="display: none;">
    <!-- 这里放你的子Div内容 -->
  </div>
</div>

然后在内容加载完成后切换显示：

// 模拟内容加载完成后的操作
function onChildContentLoaded() {
  $('.child-div .skeleton').hide();
  $('.child-div .actual-content').show();
}

这些方法里，预加载和延迟滑动是从根源解决加载慢的问题，最小高度和骨架屏是优化用户感知的办法，你可以根据自己的实际场景选择~

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