今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片,我给他推荐了两种方式

1.雪碧图(css script),有过前端经验的朋友应该都有接触过。

2.懒加载。

由于时间关系我就先为大家介绍第一种雪碧图加载,其实雪碧图加载就是将多张大小尺寸基本相同类型的图片

拼凑在一起形成一张新的图片,在页面中不会一个图片就向网络发送一次请求,这样会使得图片加载缓慢,影响

用户体验感。这里的雪碧图是由CssGaga拖拽生成的,这个软件的使用就不为大家介绍了,网上很多下载地址。

操作很简单。

话不多说直接上代码

在当前页面中的两张图片其实就只有一次网络请求,利用css script(翻译也就是雪碧图)技术进行x和y轴的偏移。

达到减少网络请求次数,更快的刷新出图片的功能。

这里不做过多的解释,注释里都有。

再将两张图片都展示下

我这边是两张图片同时出现的,也就是只要我的那张雪碧图出现,两张图片会同时加载出来,而不会像在网速慢的时候由上自下慢慢刷新出来。

微信小程序之雪碧图(css script)的更多相关文章

  1. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  2. 微信小程序的轮播图swiper问题

    微信小程序的轮播图swiper,调用后,怎样覆盖系统的 点,达到自己想要的效果 不多说,先上一图望大家多给意见: 这个是效果图: 微信小程序效果图就成这样子: <view class=" ...

  3. 微信小程序登陆流程图时序图

    微信小程序登录 小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系. 微信小程序登录流程时序图 说明 调用 wx.login() 获取 临时登录凭证cod ...

  4. 使用雪碧图Css Sprite精灵 | 加速网页响应速度

    什么是CSS Sprite精灵? 是用于前端的一种图片应用技术,通常情况,我们的开发的网页或许有很多张图片,假如在一个页面上有50多张小图片,这意味着浏览器要逐个下载50张图片.Css Sprite它 ...

  5. 如何自定义微信小程序swiper轮播图面板指示点的样式

    https://www.cnblogs.com/myboogle/p/6278163.html 微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很 ...

  6. 自定义微信小程序swiper轮播图面板指示点的样式

    微信小程序的swiper组件是滑块视图容器,也就是说平常我们看到的轮播图就可以用它来做,不过这个组件有很多样式是固定的,但是,有时候我们的设计稿的面板指示点是需要个性化的,那么如何去修改swiper组 ...

  7. 【自定义轮播图】微信小程序自定义轮播图无缝滚动

    先试试效果,可以通过设置参数调整样式 微信小程序中的轮播图可以直接使用swiper组件,如下: <swiper indicator-dots="{{indicatorDots}}&qu ...

  8. 【微信小程序】——wxss引用外部CSS文件及iconfont

    小程序引入外部文件的方式是:@import "*/*.wxss"; 因为业务需要,正在开发的小程序中需要使用iconfont,很容易想到了H5的引入方式: ```` @font-f ...

  9. 【微信小程序】——wxss引用外部CSS文件及iconfont,图文教程

    小程序引入外部文件的方式是:@import “/.wxss”; 小程序的wxss文件font-face的url不接受http地址作为参数,可以接受base64,因此可以先将字体文件下载后,转换为bas ...

随机推荐

  1. git 常用命令(不定期更新)

    过程写写吧,总是忘记.1,在一个文件夹下 键入 git init ,使之成为Git可以管理的仓库.2,编写一个文件readme.txt.3,把文件添加到仓库 git add readme.txt4,把 ...

  2. JPA总结——实体关系映射(一对多@OneToMany)

    JPA总结——实体关系映射(一对多@OneToMany) 注意:本文出自“阿飞”的博客,如果要转载本文章,请与作者联系! 并注明来源: http://blog.sina.com.cn/s/blog_4 ...

  3. java中使用OpenOffice

    1. 下载软件/傻瓜安装 OpenOffice 下载地址http://www.openoffice.org/ JodConverter 下载地址http://sourceforge.net/proje ...

  4. Java Web之Servlet中response、request乱码问题解决

    Java Web之Servlet中response.request乱码问题解决   一.request请求参数出现的乱码问题 get请求: get请求的参数是在url后面提交过来的,也就是在请求行中, ...

  5. System Trace in Depth

    原理 使用 system trace 时,会记录最近 5s 的 kernel trace,然后分析下面的操作: Scheduling activity System calls Virtual mem ...

  6. POJ 2243

    #include <iostream> #include <queue> using namespace std; ][] = {-,-,-,,,-,,,,-,-,-,,,-, ...

  7. OpenRefine导入CSV文件,数据清理后导出JSON格式

    第一步:选择要转换的CSV文件. 第二步:选择以逗号分割,并创建项目. 第三步:编辑,去掉特殊字符 Edit Cells > Transform... 第四步:导出文件,选择“Templatin ...

  8. 漫谈NIO(2)之Java的NIO

    1.前言 上章提到过Java的NIO采取的是多路IO复用模式,其衍生出来的模型就是Reactor模型.多路IO复用有两种方式,一种是select/poll,另一种是epoll.在windows系统上使 ...

  9. 手淘适配-flexible

    目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目标很清晰,就是做一个这样的H5页面. 痛点 虽然H5的页面与PC的Web页面相比简单了不少,但让我们头痛的事情是 ...

  10. netsh 第一次用这命令

    转载自 目标是WIN7 X64,且开启了防火墙,想要用他的机器去访问别的机器,又不想登陆他的系统,常规办法一般是上传一个htran,然后进行转发,但是对方有杀软,有被杀的可能性,所以我用另外一种办法达 ...