React.js电影APP渲染内容时页面跳转问题求助

我之前也碰到过一模一样的布局跳动问题——本质上是图片加载前后容器尺寸突变导致的重排：当API返回的图片还没加载完成时，你的.card容器没有固定的尺寸，高度为0；等图片加载完毕后，容器突然被撑开，就会带动整个页面布局跳动。你用min-height虽然能临时解决，但确实不适合响应式场景，下面给你几个更优雅的解决方案：

第一步：先修复一个小Bug #

你的图片URL末尾多了个空格，这会导致部分图片加载失败，先把它去掉：

<img className={ styles.image } src={`https://image.tmdb.org/t/p/w500${backdrop_path}`} alt="movie-poster" />

方法一：用CSS aspect-ratio 固定宽高比（现代浏览器友好） #

TMDB的w500图片都是16:9的比例，直接给.card设置宽高比，让容器在图片加载前就保持正确的尺寸，从根源避免布局跳动：

修改你的CSS：

.card {
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  margin: 0.5em;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 固定16:9的宽高比 */
  aspect-ratio: 16/9;
  /* 响应式宽度示例：4列布局，减去margin的宽度 */
  width: calc(25% - 1em);
}

.image-container {
  width: 100%;
  height: 100%;
}

.image {
  width: 100%;
  height: 100%;
  /* 确保图片填满容器且不变形 */
  object-fit: cover;
}

方法二：padding-top占位法（兼容旧浏览器） #

如果需要兼容不支持aspect-ratio的旧浏览器，可以用padding-top的经典技巧来撑开容器高度：

修改你的CSS：

.card {
  border: 1px solid rgba(255, 255, 255, 0.3);
  position: relative;
  margin: 0.5em;
  overflow: hidden;
  /* 响应式宽度 */
  width: calc(25% - 1em);
}

.image-container {
  position: relative;
  /* 16:9比例：9/16*100% = 56.25% */
  padding-top: 56.25%;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  backdrop-filter: blur(10px);
  box-shadow: 0 -10px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  /* 确保标题栏在图片上方 */
  z-index: 1;
}

额外优化：添加骨架屏提升体验 #

为了让用户在等待图片加载时更友好，可以加个骨架屏动画：

修改MovieCard组件：

import { useState } from 'react';
import { Link } from "react-router-dom";
import styles from "./MovieCard.module.css";

const MovieCard = (props) => {
  const { title, backdrop_path, id } = props.movie;
  const [isImageLoaded, setIsImageLoaded] = useState(false);

  return (
    <div className={styles.card}>
      <div className={styles["image-container"]}>
        {/* 加载中的骨架屏 */}
        {!isImageLoaded && <div className={styles.skeleton}></div>}
        <Link to={`/movie/${id}`}>
          <img 
            className={`${styles.image} ${!isImageLoaded ? styles.hidden : ''}`} 
            src={`https://image.tmdb.org/t/p/w500${backdrop_path}`} 
            alt="movie-poster"
            onLoad={() => setIsImageLoaded(true)}
          />
        </Link>
      </div>
      <div className={styles.content}>
        <h3 className={styles["card-title"]}>{title}</h3>
      </div>
    </div>
  );
};
export default MovieCard;

添加对应的CSS：

.skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.1);
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.6; }
  50% { opacity: 0.3; }
  100% { opacity: 0.6; }
}

.hidden {
  opacity: 0;
}

.image {
  transition: opacity 0.3s ease;
}

这样用户在等待图片加载时会看到一个柔和的跳动骨架，而不是突然出现的内容，体验会顺畅很多。

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