增加异步加载图片功能
Change-Id: I36f2473c83926f759c8298d7d70d6809b9685644
diff --git a/Merge/back_rhj/app/user_post_graph.txt b/Merge/back_rhj/app/user_post_graph.txt
index 23da7af..f8ef7df 100644
--- a/Merge/back_rhj/app/user_post_graph.txt
+++ b/Merge/back_rhj/app/user_post_graph.txt
@@ -1,11 +1,12 @@
-0 0 0 1 1 0 1 0 41 31 61 51 11 21 1749827292 1749953091 1749953091 1749953480 1749953480 1749954059 1749954059 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 1 1 2 2 1 2 1 5 2 2 1 5 1
-1 1 42 32 52 0 4 12 22 1749827292 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 5 1 5 2 2 5 1 2
-2 6 5 6 5 43 33 53 1 13 23 1749953091 1749953091 1749953480 1749953480 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 2 1 2 1 2 1 5 5 2 5
-3 2 2 0 44 34 54 14 24 1749953091 1749953480 1749954059 1749955282 1749955282 1749955282 1749955282 1749955282 2 2 2 5 2 1 5 1
-4 1 45 35 55 15 5 25 1749954059 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 5 1 5 2 1 5 2
-5 36 46 56 2 6 16 26 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 1 2 5 5 1 2 5
-6 37 47 57 7 17 27 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 2 5 1 2 5 1
-7 38 48 58 3 8 18 28 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 5 1 2 2 5 1 2
-8 39 49 59 9 19 29 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 1 2 5 1 2 5
-9 40 50 60 10 30 20 1749955282 1749955282 1749955282 1749955282 1749955282 1749955282 2 5 1 2 1 5
+0 0 0 1 1 0 1 0 11 1749827292 1749953091 1749953091 1749953480 1749953480 1749954059 1749954059 1749955282 1 1 2 2 1 2 1 5
+1 1 4 0 12 1749827292 1749955282 1749955282 1749955282 5 5 2 1
+2 6 5 6 5 13 1 0 0 1 1 2 1749953091 1749953091 1749953480 1749953480 1749955282 1749955282 1750372189 1750372215 1750372231 1750372241 1750372258 2 1 2 1 2 5 3 2 3 2 2
+3 2 2 0 1749953091 1749953480 1749954059 2 2 2
+4 1 5 1749954059 1749955282 5 5
+5 2 6 1749955282 1749955282 5 1
+6 7 1749955282 2
+7 3 8 1749955282 1749955282 2 5
+8 9 1749955282 1
+9 10 1749955282 2
10 12 1749894174 5
+11 1 4 7 0 2 13 4 11 1750372862 1750372873 1750373008 1750373592 1750373596 1750374164 1750374867 1750374871 3 3 3 2 2 2 2 2
diff --git a/WZY/xhs_front/src/components/HomeFeed.jsx b/WZY/xhs_front/src/components/HomeFeed.jsx
index d906e33..382c942 100644
--- a/WZY/xhs_front/src/components/HomeFeed.jsx
+++ b/WZY/xhs_front/src/components/HomeFeed.jsx
@@ -20,24 +20,50 @@
async function loadPosts() {
try {
const list = await fetchPosts() // [{id, title, heat, created_at}, …]
- // 为了拿到 media_urls 和 user_id，这里再拉详情
- const detailed = await Promise.all(
- list.map(async p => {
- const d = await fetchPost(p.id)
- return {
- id: d.id,
- title: d.title,
- author: `作者 ${d.user_id}`,
- avatar: `https://i.pravatar.cc/40?img=${d.user_id}`,
- img: d.media_urls?.[0] || '', // 用第一张媒体作为封面
- likes: d.heat
- }
- })
- )
- setItems(detailed)
+
+ // 第一轮：立即展示基础信息
+ const basicItems = list.map(p => ({
+ id: p.id,
+ title: p.title,
+ author: `作者 ${p.user_id || 'unknown'}`,
+ avatar: `https://i.pravatar.cc/40?img=${p.user_id || 1}`,
+ img: '', // 暂时为空
+ likes: p.heat || 0,
+ loading: true // 标记图片正在加载
+ }))
+
+ setItems(basicItems)
+ setLoading(false) // 基础内容已加载完成
+
+ // 第二轮：异步加载详情和图片
+ basicItems.forEach(async (item, index) => {
+ try {
+ const detail = await fetchPost(item.id)
+ setItems(prevItems =>
+ prevItems.map(prevItem =>
+ prevItem.id === item.id
+ ? {
+ ...prevItem,
+ img: detail.media_urls?.[0] || '',
+ loading: false
+ }
+ : prevItem
+ )
+ )
+ } catch (e) {
+ // 单个图片加载失败不影响其他
+ setItems(prevItems =>
+ prevItems.map(prevItem =>
+ prevItem.id === item.id
+ ? { ...prevItem, loading: false }
+ : prevItem
+ )
+ )
+ }
+ })
+
} catch (e) {
setError(e.message)
- } finally {
setLoading(false)
}
}
@@ -69,7 +95,11 @@
<div className="feed-grid">
{items.map(item => (
<div key={item.id} className="feed-card">
- <img className="card-img" src={item.img} alt={item.title} />
+ {item.loading ? (
+ <div className="card-img-placeholder">图片加载中...</div>
+ ) : (
+ <img className="card-img" src={item.img} alt={item.title} />
+ )}
<h3 className="card-title">{item.title}</h3>
<div className="card-footer">
<div className="card-author">