码迷,mamicode.com
首页 > 其他好文 > 详细

解决导航下图片不能按需加载的问题减少对资源请求数量

时间:2017-08-27 16:06:52      阅读:204      评论:0      收藏:0      [点我收藏+]

标签:div   解决   set   font   资源   contain   http   code   平台   

问题描述:在一个三段式的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%;
}

 

完美解决

解决导航下图片不能按需加载的问题减少对资源请求数量

标签:div   解决   set   font   资源   contain   http   code   平台   

原文地址:http://www.cnblogs.com/xkloveme/p/7440509.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!