微信小程序之雪碧图(css script)

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

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

2.懒加载。

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

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

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

操作很简单。

话不多说直接上代码

 

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

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

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

再将两张图片都展示下

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