zoukankan      html  css  js  c++  java
  • 解决导航下图片不能按需加载的问题减少对资源请求数量

    问题描述:在一个三段式的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;
         5.25rem;
        height: 14.77rem;
        background-size:100% 100%;
        
    }
    .sprite2 {
        background: url('../assets/2.jpg') no-repeat ;
          5.25rem;
        height: 14.77rem;
        background-size:100% 100%;
    }
    .sprite3 {
        background: url('../assets/3.jpg') no-repeat;
          5.25rem;
        height: 14.77rem;
        background-size:100% 100%;
    }

    完美解决

  • 相关阅读:
    策略模式
    装饰模式VS代理模式
    BufferedInputSream实现原理
    从字节码角度分析重载与重写
    函数sprintf真好用
    算法时间复杂度
    二项分布(Binomial Distribution)
    numpy中的tile函数
    图像缩放算法(最临近点插值算法、双线性内插值算法、双立方插值算法)
    C++ 类中成员函数的属性
  • 原文地址:https://www.cnblogs.com/xkloveme/p/7440509.html
Copyright © 2011-2022 走看看