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

技术

前端

发布日期: 2017-08-27

文章字数: 306

阅读时长: 1 分

阅读次数:

问题描述：在一个三段式的 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>   


<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%;
}

完美解决

xkloveme

http://www.jixiaokang.com/2017/08/27/2017/2017-08-27-jie-jue-dao-hang-xia-tu-pian-bu-neng-an-xu-jia-zai-de-wen-ti-jian-shao-dui-zi-yuan-qing-qiu-shu-liang/