React网站图片加载缓慢求助：页面加载后才显示图片

一、预加载核心视觉图片 #

针对首页轮播图这类首屏关键资源，通过两种方式提前加载：

• 在首页组件的初始化钩子中添加预加载逻辑：

  mounted() {
    // 替换为你的轮播图实际路径
    const criticalImages = [
      '/assets/carousel-1.webp',
      '/assets/carousel-2.webp'
    ];
    criticalImages.forEach(src => {
      const img = new Image();
      img.src = src;
    });
  }
  

• 在index.html的<head>中添加预加载声明，强制浏览器优先加载：

  <link rel="preload" as="image" href="/assets/carousel-1.webp" type="image/webp">
  <link rel="preload" as="image" href="/assets/carousel-2.webp" type="image/webp">
  

二、添加占位容器与渐进式加载 #

通过占位布局避免空白闪烁，同时用低质量占位图（LQIP）提升视觉体验：

• 通用图片组件改造示例：

  <template>
    <div class="img-wrapper" :style="{ width: `${width}px`, height: `${height}px` }">
      <!-- 低质量占位图，建议压缩至10KB以内 -->
      <img :src="lqipSrc" class="lqip" alt="">
      <img 
        :src="imgSrc" 
        class="target-img" 
        :alt="alt"
        @load="handleLoad"
      >
    </div>
  </template>
  <script>
  export default {
    props: ['imgSrc', 'alt', 'width', 'height', 'lqipSrc'],
    methods: {
      handleLoad() {
        this.$el.querySelector('.lqip').style.display = 'none';
      }
    }
  }
  </script>
  

• 配套样式设置层级与过渡效果：

  .img-wrapper {
    position: relative;
    overflow: hidden;
  }
  .lqip {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    filter: blur(6px);
  }
  .target-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .target-img.loaded {
    opacity: 1;
  }
  

三、优化资源加载顺序与缓存 #

• 在index.html中，将非关键脚本标记为defer或async，避免阻塞图片加载：

  <script src="/js/non-critical.js" defer></script>
  

• 配置服务器HTTP缓存头，设置Cache-Control: max-age=31536000，让浏览器长期缓存已加载的图片，切换页面时直接读取本地缓存。

四、路由切换时的骨架屏优化 #

针对页面切换的空白问题，添加骨架屏替代空白状态：

• 页面组件示例：

  <template>
    <div v-if="loading" class="page-skeleton">
      <div class="carousel-skeleton"></div>
      <div class="content-skeleton"></div>
    </div>
    <div v-else>
      <!-- 页面实际内容 -->
      <HomeCarousel />
      <HomeContent />
    </div>
  </template>
  <script>
  export default {
    data() {
      return { loading: true }
    },
    mounted() {
      // 监听首屏关键图片加载完成后关闭骨架屏
      const checkImgLoad = () => {
        const img = new Image();
        img.src = '/assets/carousel-1.webp';
        img.onload = () => this.loading = false;
      }
      checkImgLoad();
    }
  }
  </script>
  

• 骨架屏样式模拟页面结构：

  .page-skeleton {
    padding: 16px;
  }
  .carousel-skeleton {
    width: 100%;
    height: 300px;
    background: #f0f0f0;
    border-radius: 8px;
    margin-bottom: 16px;
  }
  .content-skeleton {
    width: 100%;
    height: 400px;
    background: #f0f0f0;
    border-radius: 8px;
  }
  

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