CRMEB论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 895|回复: 69

[帮助文档] 超级简单实现小程序图片懒加载

  [复制链接]

10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
发表于 2019-10-15 19:13:38 | 显示全部楼层 |阅读模式
本帖最后由 qq1394880808 于 2019-11-5 22:35 编辑

刚看了下小程序官方是有懒加载API接口,所以超简单随便搞下就能实现懒加载咯
PS:小程序的懒加载API接口跟我们常规使用的懒加载不一样,他这个会提前多加载一个屏幕(也就是预先加载2个屏幕内容),个人感觉这个体验更好用户察觉不到懒加载看不到白屏内容。所以内容小于两个屏幕的全加载出来了看不出效果的,只有内容大于2个屏幕的才有效果!
很适合我们商城使用,毕竟商城90%以上都是图片内容!懒加载好处,可以提高页面载入速度,提升用户体验!如果用的cdn加速还能起到省流量的作用(毕竟不是所有用户打开都要看到底的,有的可能就点开马上返回了,或者点错了,所以没必要把图片一次性全加载出来咯)
下面试试效果:
153456464.gif

游客,如果您要查看本帖隐藏内容请回复




10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
 楼主| 发表于 2019-10-15 19:15:42 | 显示全部楼层
别管我那个 /750.jpg ,那个是我设置的阿里云oss的图片处理样式,压缩图片用的,80%压缩率可以减少将近一半的图片体积,有空我把教程发上来很简单
回复

使用道具 举报

31

主题

125

帖子

1391

积分

vip4

Rank: 4

积分
1391
发表于 2019-10-15 20:55:50 | 显示全部楼层
还是你热心。感谢
回复

使用道具 举报

10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
 楼主| 发表于 2019-10-15 21:10:56 | 显示全部楼层
257897 发表于 2019-10-15 20:55
还是你热心。感谢

大家都需要这些,电商网站图片最多的,有必要的话z最好  数据库最好换成Alisql专门针对电商场景优化过的,淘宝天猫都在使用,nginx换成tengine也是阿里开源的服务器软件,100%兼容tengine,针对电商网站优化过的 淘宝天猫就用的这个,当然前期没什么流量感觉不出来的!
回复

使用道具 举报

17

主题

75

帖子

1018

积分

vip4

Rank: 4

积分
1018
发表于 2019-10-19 21:30:07 | 显示全部楼层
给力给力给力给力给力
回复

使用道具 举报

6

主题

28

帖子

574

积分

vip4

Rank: 4

积分
574
发表于 2019-10-20 19:35:27 | 显示全部楼层
回复

使用道具 举报

2

主题

31

帖子

530

积分

vip4

Rank: 4

积分
530
发表于 2019-10-20 20:07:29 | 显示全部楼层
学习学习
回复

使用道具 举报

1

主题

4

帖子

145

积分

vip4

Rank: 4

积分
145
发表于 2019-10-20 22:08:53 | 显示全部楼层
学习学习
回复

使用道具 举报

发表于 2019-10-20 23:43:58 来自手机 | 显示全部楼层
学习学习
回复

使用道具 举报

4

主题

18

帖子

508

积分

vip4

Rank: 4

积分
508

最佳新人

发表于 2019-10-24 09:43:18 | 显示全部楼层
教程不错,感谢
回复

使用道具 举报

0

主题

15

帖子

310

积分

vip4

Rank: 4

积分
310
发表于 2019-10-24 23:20:05 | 显示全部楼层
谢谢分享
回复

使用道具 举报

10

主题

33

帖子

544

积分

vip4

Rank: 4

积分
544
发表于 2019-10-25 10:46:15 | 显示全部楼层
回复

使用道具 举报

4

主题

29

帖子

576

积分

vip4

Rank: 4

积分
576
发表于 2019-10-26 22:05:04 | 显示全部楼层
666
回复

使用道具 举报

0

主题

2

帖子

52

积分

vip4

Rank: 4

积分
52
发表于 2019-10-28 16:35:18 | 显示全部楼层
11111111
回复

使用道具 举报

1

主题

17

帖子

271

积分

vip4

Rank: 4

积分
271
发表于 2019-10-29 09:52:55 | 显示全部楼层
感谢您的分享
回复

使用道具 举报

0

主题

25

帖子

476

积分

中级会员

Rank: 3Rank: 3

积分
476
发表于 2019-10-29 17:28:54 | 显示全部楼层
谢谢~分享~
回复

使用道具 举报

2

主题

8

帖子

145

积分

vip4

Rank: 4

积分
145
发表于 2019-10-30 11:51:27 | 显示全部楼层
学习
回复

使用道具 举报

3

主题

18

帖子

352

积分

vip4

Rank: 4

积分
352
发表于 2019-11-2 16:43:46 | 显示全部楼层
比较实用
!!!
回复

使用道具 举报

7

主题

18

帖子

328

积分

vip4

Rank: 4

积分
328
发表于 2019-11-5 14:26:38 | 显示全部楼层
333
回复

使用道具 举报

0

主题

1

帖子

72

积分

vip3

Rank: 3Rank: 3

积分
72
发表于 2019-11-5 21:36:51 | 显示全部楼层
厉害
回复

使用道具 举报

0

主题

1

帖子

75

积分

vip4

Rank: 4

积分
75
发表于 2019-11-6 14:56:44 | 显示全部楼层
,毕竟商城90%以上都是图片内容!
回复

使用道具 举报

8

主题

25

帖子

566

积分

vip3

Rank: 3Rank: 3

积分
566
发表于 2019-11-6 15:47:37 | 显示全部楼层
谢谢分享
回复

使用道具 举报

0

主题

1

帖子

39

积分

新手上路

Rank: 1

积分
39
发表于 2019-11-6 18:43:50 | 显示全部楼层
RE: 超级简单实现小程序图片懒加载 [修改]
回复

使用道具 举报

1

主题

16

帖子

336

积分

vip4

Rank: 4

积分
336
发表于 2019-11-7 00:02:00 | 显示全部楼层
谢谢分享!~~
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-7 01:34:21 | 显示全部楼层
看看是如何实现的。谢谢主
回复

使用道具 举报

0

主题

8

帖子

78

积分

vip4

Rank: 4

积分
78
发表于 2019-11-7 13:12:00 | 显示全部楼层
svds优秀
回复

使用道具 举报

9

主题

20

帖子

291

积分

中级会员

Rank: 3Rank: 3

积分
291
发表于 2019-11-7 15:39:21 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

6

帖子

144

积分

vip4

Rank: 4

积分
144
发表于 2019-11-7 19:47:56 | 显示全部楼层
多谢大佬分享。
回复

使用道具 举报

10

主题

26

帖子

424

积分

vip4

Rank: 4

积分
424
发表于 2019-11-10 13:52:32 | 显示全部楼层
真好真好
回复

使用道具 举报

4

主题

22

帖子

546

积分

vip4

Rank: 4

积分
546
发表于 2019-11-10 23:10:30 | 显示全部楼层
厉害了
回复

使用道具 举报

0

主题

1

帖子

80

积分

vip4

Rank: 4

积分
80
发表于 2019-11-11 17:58:15 | 显示全部楼层
6666
回复

使用道具 举报

0

主题

4

帖子

79

积分

注册会员

Rank: 2

积分
79
发表于 2019-11-13 11:51:32 | 显示全部楼层
学习一下学习一下
回复

使用道具 举报

4

主题

12

帖子

227

积分

vip4

Rank: 4

积分
227
发表于 2019-11-13 13:16:33 | 显示全部楼层
不错
回复

使用道具 举报

0

主题

1

帖子

88

积分

vip4

Rank: 4

积分
88
发表于 2019-11-13 15:55:56 | 显示全部楼层
历害!!
回复

使用道具 举报

1

主题

15

帖子

363

积分

vip4

Rank: 4

积分
363
发表于 2019-11-13 16:15:42 | 显示全部楼层
支持一下!!!
回复

使用道具 举报

0

主题

7

帖子

152

积分

vip4

Rank: 4

积分
152
发表于 2019-11-13 16:26:32 | 显示全部楼层
超级简单实现小程序
回复

使用道具 举报

4

主题

25

帖子

363

积分

vip4

Rank: 4

积分
363
发表于 2019-11-13 17:06:33 | 显示全部楼层
来看看怎么弄
回复

使用道具 举报

1

主题

28

帖子

581

积分

vip4

Rank: 4

积分
581
发表于 2019-11-14 09:42:48 | 显示全部楼层
这个非常实用
回复

使用道具 举报

1

主题

29

帖子

497

积分

vip4

Rank: 4

积分
497
发表于 2019-11-14 10:17:58 | 显示全部楼层
看看
回复

使用道具 举报

3

主题

44

帖子

802

积分

vip4

Rank: 4

积分
802
发表于 2019-11-18 20:34:38 | 显示全部楼层
只改那一个地方 吗?
回复

使用道具 举报

0

主题

2

帖子

52

积分

vip4

Rank: 4

积分
52
发表于 2019-11-18 21:26:33 | 显示全部楼层
回复

使用道具 举报

10

主题

79

帖子

879

积分

vip4

Rank: 4

积分
879
 楼主| 发表于 2019-11-18 23:45:31 | 显示全部楼层
zyluoqun 发表于 2019-11-18 20:34
只改那一个地方 吗?

主要是改详情页,因为详情页图片最多最大咯!          其他页面也可以改下,比如首页咯,还有购物车页面,订单页面...反正就是那个意思 大于2个屏幕的内容图片要下拉一段距离才加载!       比如购物车来说东西多了超2屏幕了才有效果
回复

使用道具 举报

0

主题

1

帖子

47

积分

新手上路

Rank: 1

积分
47
发表于 2019-11-19 12:22:44 | 显示全部楼层
学习学习
回复

使用道具 举报

发表于 2019-11-21 10:46:55 | 显示全部楼层
谢谢分享
回复

使用道具 举报

0

主题

22

帖子

306

积分

vip4

Rank: 4

积分
306
发表于 2019-12-9 11:36:03 | 显示全部楼层
谢谢
回复

使用道具 举报

1

主题

9

帖子

202

积分

中级会员

Rank: 3Rank: 3

积分
202
发表于 2019-12-9 11:48:19 | 显示全部楼层
学习学习
回复

使用道具 举报

4

主题

20

帖子

242

积分

vip4

Rank: 4

积分
242
发表于 2019-12-16 02:14:47 | 显示全部楼层
66
回复

使用道具 举报

6

主题

31

帖子

767

积分

vip4

Rank: 4

积分
767
发表于 2019-12-16 08:19:35 来自手机 | 显示全部楼层
谢谢
回复

使用道具 举报

0

主题

9

帖子

174

积分

vip4

Rank: 4

积分
174
发表于 2019-12-16 10:17:53 | 显示全部楼层
65465465465
回复

使用道具 举报

3

主题

13

帖子

252

积分

vip4

Rank: 4

积分
252
发表于 2019-12-16 12:16:24 | 显示全部楼层
收藏起来,谢谢啦
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|CRMEB论坛

GMT+8, 2020-1-28 05:07 , Processed in 0.125477 second(s), 22 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表