Vue图片加载状态检测与骨架屏动态切换实现

解决方案非常直接：让每个卡片自行管理自己的加载状态，而不是由父组件统一控制。

✅ 正确做法：为每个卡片独立管理加载状态

核心思路是：将 isLoaded 的控制权下放到每个 ItemCard 组件内部，父组件仅负责数据获取以及骨架屏的占位展示。这样一来，每张图片的加载进度彼此独立，互不干扰。

1. 父组件：移除全局 isLoaded，改用插槽 + 条件渲染

注意，父组件不再在模板中插入一个全局的 isLoaded 变量。数据尚未返回时，直接循环渲染三个 ItemCardSkeleton 作为占位。数据到达后，再渲染真实的卡片——但每张卡片内部的图片加载状态，由子组件自行掌控。

2. 子组件：每个卡片独立跟踪自身图片加载状态

这里最关键的一行是：const isLoaded = ref(false);。将初始值设为 false，而不是不传参。这样骨架屏从一开始就能正常显示。当图片加载完成后，@load 事件将 isLoaded 更新为 true，骨架屏随之消失，图片与内容一同呈现。

此外，务必处理 @error 事件。如果图片链接失效而不做处理，骨架屏将永远停留在页面上。将 isLoaded 也设为 true，即使图片加载失败，用户至少能够看到文字内容，而不是一个空荡荡的灰色占位块。

⚠️ 注意事项与最佳实践

• 勿共享 ref 实例：每个 ItemCard 必须拥有自己独立的 isLoaded = ref(false)，否则所有卡片将共享同一个状态，失去“逐张加载、逐张显示”的预期效果。
• 处理加载失败：添加 @error 监听并将 isLoaded 设为 true，防止图片 404 导致骨架屏永久停留。
• CSS 骨架动画建议：使用 @keyframes pulse 实现渐变灰度动画，比静态色块更符合现代 UX 设计规范。
• 性能优化：如果卡片数量较多，可结合 IntersectionObserver 实现图片懒加载，进一步减轻首屏渲染压力。

通过以上重构，骨架屏将严格遵循“数据 pending → 显示全局 skeleton；单图未加载 → 显示该卡片 skeleton；单图加载完成 → 立即替换为真实内容”的行为逻辑，彻底解决闪退问题，实现流畅、可控的加载体验。