什么是懒加载?
懒加载,更好的理解可以是延迟加载。 指的是程序不是在首次加载所有的内容,而是只有在用户需要的时候再加载内容。
为什么要使用懒加载?
- 【用户体验好】懒加载可以让用户首次进入程序的时间更快,减少等待的痛苦和流失;
- 【服务器负担小】懒加载可以降低服务器负担,只传输用户需要的内容
以社区里的音乐游戏 Alltale 为例:
Alltale 是一款优秀的音乐游戏, 整个工程在不使用任何扩展(可以放到所有社区里的普世性)的情况下可玩性很强。 保证到纯粹正统的原味固然重要。 站在用户体验上,你会发现此游戏加载时间十分长。
如上图所示,左边可以看到是用户游玩的界面,此时玩家甚至都还没有开始游戏; 右边是网络传输,此时程序已经去请求下载了大量的 mp3 文件。 正如作者自己在作品介绍里说的,项目体积有 112.69M,也就是任何一个玩家在没有开始游戏时,就要先下载 100 多兆的资源文件才能开始游戏。
以社区中某个作品为例,如下图所示,用户首次打开时,需要下载 327 MB 的资源,即便是高速的网络,也需要等待将近 1 分钟才能完全打开。 这极大地降低了用户的体验:
相比之下,《共创视频箱》 这个项目就用到了懒加载技术,虽然是一个播放视频的程序,但传输仅在用户选择播放具体视频时才下载资源。性能十分高,用户体验十分好。
什么样的内容推荐使用懒加载?
- 背景音乐,或者比较大尺寸的音频文件
- 视频素材
如何使用懒加载?
案例一、懒加载一个背景音乐,并且循环播放
第一步:打开 Gandi,上传音乐
在 Gandi 的左边,可以看到第二个选项《素材库》,如下图所示
在界面中下方,可以找到懒加载媒体库:
点击 Audio 或者 Video,再点上传。 选择并且上传。
你将会看到在懒加载媒体库里出现了音频文件。 可以点播放试听是否正确:
第二步:载入《媒体助手》插件,并且播放音乐
在 Gandi 中找到媒体助手,并且安装:
回到代码编写区,你会看到媒体助手被加载了。 找到音频部分,你需要用到以下几个代码块:
我们希望把刚才上传的音乐 gameover_loop_01.mp3 关联到 gameOver,只需要使用这句代码:
例如,我们想实现的是,当只角色被点击时,再载入资源文件并且在载入完成后循环播放。 我们只需要这样做:
示例源代码:
案例二、载入一个视频,并且把它当作背景播放
第一步:上传视频文件
和上传音频步骤一样,不再赘述
第二步:懒加载中载入视频,并且播放
没错,就这么简单!
示例源代码: