首屏加载时如何正确实现 Loading 占位避免布局抖动？

设计师小倩提问于 2026-03-31 08:49:14 阅读 3

优化

我在做首页优化，数据还没回来的时候想用 skeleton loading 占位，但每次数据加载完 DOM 结构一变，页面就会“跳一下”，体验很差。我试过给容器写死高度，但不同设备下内容高度不一样，不太靠谱。

现在我是这样处理的：先渲染一个带固定高度的 loading 组件，等数据回来再替换成真实内容。但感觉这方案太糙了，有没有更优雅的方式？比如能不能让占位元素和真实内容保持一致的结构？

function ProductList() {
  const [products, setProducts] = useState(null);

  useEffect(() => {
    fetch('/api/products').then(res => res.json()).then(setProducts);
  }, []);

  if (!products) {
    return <div className="skeleton" style={{ height: '200px' }}></div>;
  }

  return products.map(p => <ProductItem key={p.id} data={p} />);
}

我来解答赞 4 收藏

反馈

1 条解答

程序员晴文 Lv1

我一般直接用CSS的aspect-ratio属性来保持占位元素和真实内容比例一致。这样不用写死高度，布局也不会跳。

function ProductList() {

  const [products, setProducts] = useState(null);



  useEffect(() => {

    fetch('/api/products').then(res => res.json()).then(setProducts);

  }, []);



  if (!products) {

    return <div className="skeleton" style={{ aspectRatio: '4 / 1' }}></div>;

  }



  return products.map(p => <ProductItem key={p.id} data={p} />);

}

记得给ProductItem也加上同样的aspect-ratio值就搞定了，省事又有效。

2026-03-31 08:59