本帖最后由 qq1394880808 于 2019-11-5 22:35 编辑

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

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




本帖寻求最佳方案

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

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

发表于 2019-10-25 10:46:15 | 显示全部楼层
12#
回复

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

0

主题

26

帖子

591

积分

高级会员

Rank: 4

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

0

主题

1

帖子

39

积分

新手上路

Rank: 1

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

9

主题

20

帖子

291

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

0

主题

4

帖子

79

积分

注册会员

Rank: 2

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

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

使用道具 举报

0

主题

1

帖子

47

积分

新手上路

Rank: 1

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

1

主题

9

帖子

222

积分

中级会员

Rank: 3Rank: 3

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

使用道具 举报

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

    本版积分规则

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

    Powered by Discuz! X3.4  © 2001-2013 Comsenz Inc.