微信小程序之雪碧图(css script)
今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片,我给他推荐了两种方式
1.雪碧图(css script),有过前端经验的朋友应该都有接触过。
2.懒加载。
由于时间关系我就先为大家介绍第一种雪碧图加载,其实雪碧图加载就是将多张大小尺寸基本相同类型的图片
拼凑在一起形成一张新的图片,在页面中不会一个图片就向网络发送一次请求,这样会使得图片加载缓慢,影响
用户体验感。这里的雪碧图是由CssGaga拖拽生成的,这个软件的使用就不为大家介绍了,网上很多下载地址。
操作很简单。
话不多说直接上代码
在当前页面中的两张图片其实就只有一次网络请求,利用css script(翻译也就是雪碧图)技术进行x和y轴的偏移。
达到减少网络请求次数,更快的刷新出图片的功能。
这里不做过多的解释,注释里都有。
再将两张图片都展示下
我这边是两张图片同时出现的,也就是只要我的那张雪碧图出现,两张图片会同时加载出来,而不会像在网速慢的时候由上自下慢慢刷新出来。
微信小程序之雪碧图(css script)的更多相关文章
- 使用compass自动合并css雪碧图(css sprite)
本文转载自: 使用compass自动合并css雪碧图(css sprite)
- 微信小程序的轮播图swiper问题
微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...
- 微信小程序登陆流程图时序图
微信小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 微信小程序登录流程时序图 说明 调用 wx.login() 获取 临时登录凭证cod ...
- 使用雪碧图Css Sprite精灵 | 加速网页响应速度
什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...
- 如何自定义微信小程序swiper轮播图面板指示点的样式
https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...
- 自定义微信小程序swiper轮播图面板指示点的样式
微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...
- 【自定义轮播图】微信小程序自定义轮播图无缝滚动
先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...
- 【微信小程序】——wxss引用外部CSS文件及iconfont
小程序引入外部文件的方式是:@import "*/*.wxss"; 因为业务需要,正在开发的小程序中需要使用iconfont,很容易想到了H5的引入方式: ```` @font-f ...
- 【微信小程序】——wxss引用外部CSS文件及iconfont,图文教程
小程序引入外部文件的方式是:@import “/.wxss”; 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为bas ...
随机推荐
- JMeter性能测试-服务器资源监控插件详解
零.引言 我们对被测应用进行性能测试时,除了关注吞吐量.响应时间等应用自身的表现外,对应用运行所涉及的服务器资源的使用情况,也是非常重要的方面,通过实时监控,可以准确的把握不同测试场景下服 ...
- 如何修改静态IP地址和动态IP地址
打开控制面板,一般在电脑的菜单栏能找到,win8和win10可以使用快捷键(win键+X键),找不到的朋友可以搜索一下. 进入到网络和共享中心,点击更改适配器设置. 这里显示的是电脑所以的网络 ...
- Advanced Debugging and the Address Sanitizer
A debug trick 在异常端点处运行 po $arg1,找出异常信息.  Address Sanitizer 概述 是一个运行时检测工具 发现内存问题 可以用于模拟器和设备 可以发现的问题 ...
- iOS-UIView一些坐标和位置方法封装
新建基于UIView扩展类 UIView+wkjFrame,此类是为了方便获取一些基于UIView类UI控件的坐标和位置的简化,直接引用即可 UIView+wkjFrame.h - (CGPoint) ...
- 使用SUI框架下的<a>标签点击跳转页面不刷新的问题
最近写好了几个页面,今天试着将各个页面的链接打通,然后问题就来了...(╯︵╰) 这里看一下原来想要实现的两个页面跳转的效果--点击图一标注的栏目可以跳转到一个新的页面图二... 按照之前写a标签的跳 ...
- FlowPortal-BPM——功能:判断数据库表中字段是否重复并阻止提交或保存
一.JS添加代码,判断是否有OnSubmit事件 文件位置:YZSoft/Forms/src/Validator.js //=====判断是否有OnSubmit事件===== if (typeof ( ...
- javaWeb知识点学习(一)
1.静态页面的传递过程 在静态WEB程序中,客户端使用WEB浏览器(IE.FireFox等)经过网络(Network)连接到服务器上,使用HTTP协议发起一个请求(Request),告诉服务器我现在需 ...
- 漫谈NIO(2)之Java的NIO
1.前言 上章提到过Java的NIO采取的是多路IO复用模式,其衍生出来的模型就是Reactor模型.多路IO复用有两种方式,一种是select/poll,另一种是epoll.在windows系统上使 ...
- Java之集合(十八)DelayQueue
转载请注明源出处:http://www.cnblogs.com/lighten/p/7493735.html 1.前言 本章介绍阻塞队列DelayQueue,这是一个无界阻塞队列.其存储延时的元素,只 ...
- java面试④数据库部分
2.3.1 数据库的分类及常用的数据库 数据库分为:关系型数据库和非关系型数据库 关系数据库:mysql,oracle,sqlServer 非关系型:redis,mongoDB 2.3.2 简单介绍一 ...