問題描述：在一個三段式的navbar中，各段下面有一個長圖（類似這樣的）

在優化之前需要加載三張大圖這無疑增加了資源請求數量

因此，我想到了將圖片轉換為背景以此減少請求沒想到方案是可行的，上代碼

  <div class="page-navbar">  
    <!-- navbar -->  
    <mt-navbar class="page-part" v-model="selected" swipeable>  
      <mt-tab-item id="1">平臺介紹</mt-tab-item>  
      <
 
mt-tab-item id="2">雇傭模式</mt-tab-item>  
      <mt-tab-item id="3">3天試用</mt-tab-item>  
    </mt-navbar>   
  
    <!-- tabcontainer -->  
    <mt-tab-container v-model="selected" class="imgadapt">  
      <mt-tab-container-item id="1">  
      <div 
 
class="sprite1"></div>  
    
      </mt-tab-container-item>  
      <mt-tab-container-item id="2">
      <div class="sprite2"></div>  
      </mt-tab-container-item>  
      <mt-tab-container-item id="3">  
    
    <div class="sprite3"></div
 
>  
      </mt-tab-container-item>  
    </mt-tab-container>  
  </div> 

重點來了

.sprite1 {
    background: url(‘../assets/1.jpg‘) no-repeat;
    width: 5.25rem;
    height: 14.77rem;
    background-size:100% 100%;
    
}
.sprite2 {
    background: url(‘../assets/2.jpg‘) no-repeat ;
     width: 5.25rem;
    height: 14.77rem;
    background-size:100% 100%;
}
.sprite3 {
    background: url(‘../assets/3.jpg‘) no-repeat;
     width: 5.25rem;
    height: 14.77rem;
    background-size:100% 100%;
}

完美解決

解決導航下圖片不能按需加載的問題減少對資源請求數量