商品详情页加载优化核心是明确反馈而非炫酷：用CSS spinner、骨架屏、按钮状态切换和慎用全屏loading层，配合时机控制与视觉衔接提升体验。
商品详情页的加载动画，核心不是“炫酷”，而是让用户明确感知「内容正在来，不是卡了、没反应、或失败了」。纯 CSS 实现的旋转 spinner 就够用，关键在控制时机和 DOM 位置——别让动画遮住商品图，也别等整页 DOM 加载完才显示。
按钮点击后立即反馈：用 disabled + 文字切换防重复提交
用户点「加入购物车」或「立即购买」时，网络请求可能有延迟，但按钮必须立刻响应：
- 点击瞬间设
btn.disabled = true，阻止连点； - 同步改
btn.textContent为「加载中…」或「提交中」，比纯图标更明确； -
fetch或axios完成后，无论成功失败，都恢复disabled = false和原始文案； - 别只在
then里恢复，finally才保险，否则异常时按钮会永远卡住。
商品主图区域加骨架屏：用 background + linear-gradient 模拟占位
图片加载慢时，空白或默认占位图（如灰色方块）体验差。用 CSS 画一个轻量级骨架屏更自然：
- 给商品图容器加 class：
class="product-image-placeholder"； - CSS 中设
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)，配合background-size: 200% 200%和animation: placeholder-shimmer 2s infinite； - 不依赖额外图片或 SVG，体积零增加；
- 图片加载完成（
img.onload）后移除该 class，让真实图片自然覆盖。
全屏 loading 层要慎用：只在首次进入详情页时显示
商品详情页通常是 SPA 路由跳转或单页刷新，全屏遮罩（position: fixed; z-index: 9999）容易误伤体验：
立即学习“前端免费学习笔记（深入）”；
- 如果用户是从列表页点击进来的，建议只在
fetch('/api/product?id=123')请求发起时显示，且 300ms 内未返回再出现——避免闪动； - 绝对不要在
window.onload后才隐藏，应绑定到数据请求 resolve； - 移动端需加
pointer-events: none到 loading 层，否则会拦截底层滚动； - 背景半透明色建议用
rgba(255,255,255,0.92)，太白刺眼，太灰显脏。
CSS 旋转 spinner 的尺寸和定位细节
那个经典圆圈动画，写错一两个属性就会偏移、跳动或模糊：
- 容器必须设
position: relative，否则伪元素::after无法精确定位居中； - 圆圈宽高建议用
1em，比如width: 1em; height: 1em;，这样能随父元素字号缩放，适配按钮或标题不同大小； - 边框粗细统一设为
border: 2px solid transparent，再单独设border-top-color: #007bff； - 动画用
@keyframes spin { to { transform: rotate(360deg); } }，别写0% → 100%，浏览器兼容性更好； - 加
will-change: transform提升动画帧率，尤其在低端安卓机上明显。
最常被忽略的是「加载完成后的视觉衔接」：spinner 消失、文字切回、图片淡入——这三步如果不同步，用户会觉得页面“抖”了一下。把它们放在同一个状态更新周期里处理，比分别写三段 DOM 操作更稳。
