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

kbyyd24 发布于2019-04-23 13:13 / 1338人阅读

摘要：今天有朋友问我关于微信小程序中如何在不占用大量网络带宽的情况下快速加载图片，我给他推荐了两种方式雪碧图有过前端经验的朋友应该都有接触过。这里的雪碧图是由拖拽生成的，这个软件的使用就不为大家介绍了，网上很多下载地址。

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

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

2.懒加载。

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

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

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

操作很简单。

话不多说直接上代码

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

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

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

再将两张图片都展示下

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

云服务器 GPU云服务器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1602.html

自制，简易仿京东微信小程序demo

摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名学习微信小程序一段时间，自己仿照京东小程序做了几个demo页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学https://github.com...

sourcenode 2019-08-22 11:05 评论0 收藏0
自制，简易仿京东微信小程序demo

摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名学习微信小程序一段时间，自己仿照京东小程序做了几个demo页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学https://github.com...

shiweifu 2019-08-01 17:36 评论0 收藏0
自制，简易仿京东微信小程序demo

摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名学习微信小程序一段时间，自己仿照京东小程序做了几个demo页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学https://github.com...

QiuyueZhong 2019-08-29 13:27 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

xiaokai 2019-08-01 18:21 评论0 收藏0
HTML-CSS

摘要：但是，从字体上来说雪碧图制作，使用以及相关，图文。由于采用了编译，所以能够保证在浏览器不支持标准布局的情况下，回滚到旧版本的，保证移动设备中能呈现出一样的布局效果。我不想陷入和的纷争，但是有一件事是确定的极大的提升了移动端一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 ...

CHENGKANG 2019-08-29 14:11 评论0 收藏0