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

2018-11-05 08:23:13来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

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

2.懒加载。

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

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

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

操作很简单。

话不多说直接上代码

 

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

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

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

再将两张图片都展示下

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS 高度(css height)

下一篇:12个美丽的网站与受到日出启发的配色方案