React应用中基于Unsplash API的图片加载优化方案咨询

1. 使用匹配展示场景的图片尺寸（最核心优化） #

你当前用的item.urls.full是Unsplash的原始大图，体积通常在几MB级别，完全没必要用于普通卡片展示。API返回的urls字段提供了多种预定义尺寸，选择和你的卡片容器匹配的尺寸即可大幅降低图片体积：

• thumb：200x200小缩略图
• small：400x400小尺寸图
• regular：1080x1080常规尺寸图

修改代码中的img标签：

<img src={item.urls.regular} alt={item.alt_description} />

根据你的卡片大小，选small或regular足够满足清晰度需求。

2. 开启原生图片懒加载 #

给img标签添加loading="lazy"属性，让浏览器仅加载进入视口范围内的图片，减少初始页面的资源加载量：

<img src={item.urls.regular} alt={item.alt_description} loading="lazy" />

这是浏览器原生支持的特性，无需额外依赖，简单高效。

3. 添加占位元素优化加载体验 #

图片加载前显示占位，避免页面空白，还可以用低质量缩略图做模糊预览：

<div className="card">
  <div className="img-placeholder" style={{ backgroundImage: `url(${item.urls.thumb})` }}>
    <img src={item.urls.regular} alt={item.alt_description} loading="lazy" className="card-img" />
  </div>
  <div className='user-info'>{item.user.name}</div>
</div>

配合CSS实现模糊占位效果：

.img-placeholder {
  width: 100%;
  height: 220px; /* 匹配你的卡片高度 */
  background-size: cover;
  filter: blur(8px);
  overflow: hidden;
}
.card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

4. 防抖搜索请求，避免重复加载 #

如果用户多次点击「Go」按钮，会重复发起API请求并加载重复图片，添加防抖函数限制请求频率：

// 定义防抖工具函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

// 包装搜索函数为防抖版本
const debouncedGetPhotos = debounce(getPhotos, 300);

// 修改按钮点击事件
<input type="button" value="Go" onClick={debouncedGetPhotos}/>

5. 本地缓存搜索结果 #

对重复搜索的关键词，在本地缓存API返回的图片列表，避免重复请求和重复加载：

// 新增缓存状态
const [searchCache, setSearchCache] = useState({});

async function getPhotos() {
  // 先检查缓存
  if (searchCache[search]) {
    setContainerImgs(searchCache[search]);
    return;
  }
  
  let response = await fetch(`https://api.unsplash.com/search/photos?page=1&query=${search}&client_id={APP-SECRET}`);
  let result = await response.json();
  if (result) {
    setContainerImgs(result.results);
    // 将结果存入缓存
    setSearchCache(prev => ({ ...prev, [search]: result.results }));
  }
}

6. 优先加载首屏图片 #

给首屏可见的图片添加priority属性，告诉浏览器优先加载这些资源：

{containerImgs.map((item, index) =>
  <div key={item.id} className="card">
    <img 
      src={item.urls.regular} 
      alt={item.alt_description} 
      loading="lazy" 
      priority={index < 6} // 假设首屏显示6张图
    />
    <div className='user-info'>{item.user.name}</div>
  </div>
)}

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