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

    完美解决

  • 相关阅读:
    c语言函数定义、函数声明、函数调用以及extern跨文件的变量引用
    c语言局部变量 静态局部变量 全局变量与静态全局变量
    Source Insight建工程之Kernel
    day49
    管道实例取出最常用的10个指令
    day52
    Linux中vi的使用
    vi高级技巧
    vim配置
    typedef
  • 原文地址:https://www.cnblogs.com/xkloveme/p/7440509.html
Copyright © 2011-2022 走看看